Funktion för att ändra knappens bakgrund i HTML

Om du vill att knapparna på dina webbsidor ska fånga uppmärksamhet måste du göra mer än att bara lägga till dem i HTML-koden med hjälp av "inmatnings" -taggar. Knappar har som standard grå bakgrund med svart text. En enkel JavaScript-funktion kan ändra en tråkig knappbakgrund till en färgstark eller till och med dekorera den med en bild av ditt val.

Skapa knappar

Utan CSS-formatering visas den kod som behövs för att skapa en grundläggande webbsida-knapp enligt följande:

Du har möjlighet att lägga till en CSS-klassreferens som ställer knappens bakgrund till gul som visas här:

Följande CSS-klass, som placeras i ditt dokuments stilavsnitt, skapar den klassen:

.styleButton {bakgrundsfärg: gul;}

Ändra "gul" till någon giltig HTML-färg för att uppnå det utseende du önskar. Du kan lägga till en bild på knappens bakgrund istället genom att använda följande CSS-kod:

.styleButton {background-image: url ('myImage.jpg');}

Byt ut "myImage.jpg" med webbadressen till en bild på webben eller webbadressen till en bild på din webbserver.

Funktionsparametrar

Följande exempel visar ramen för en funktion som ändrar knappens bakgrund:

funktionsbyteBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Ändra knappens bakgrundsbild}

annars {// Ändra knappens bakgrundsfärg}}

Denna funktion accepterar tre parametrar. ButtonID håller ID för den knapp du vill ändra. Bakgrundstypvariabeln kan ha ett värde av "färg" eller "bild". Den sista parametern, knappen Bakgrund, håller den färg du vill lägga till på knappen eller webbadressen till en bild. Koden bearbetar logiken definierad i det första "if" -blocket om du skickar "bild" som bakgrundstypens värde. Annars utför det uttalandena i "annars" -blocket och ändrar knappens bakgrundsfärg.

Kodlogik

Följande kod listar de uttalanden som behövs för att lägga till en bakgrundsbild till en knapp eller ändra dess bakgrundsfärg beroende på värdet som passerat i parameteren backgroundType:

funktion changePackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Ändra knappens bakgrundsbild var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

annars {// Ändra knappens bakgrundsfärg document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Om du ringer funktionen och skickar den till en bakgrundstyp av "bild" anger koden knappens backgroundImage-attribut till färgen som passeras i knappenBackground-variabeln. Annars anger koden knappens backgroundColor-attribut till färgen som passeras i knappen Bakgrundsvariabel.

tips

När du använder funktionen för att lägga till en bild i en bakgrund, välj en som är tillräckligt liten för att passa inuti knappen. HTML minskar inte bildens storlek för att passa utan ett sidelement. Du kan också göra knappbakgrunder flytta, pulsera eller lysa genom att lägga till små animerade GIFS till dem. Var försiktig när du lägger komplexa bilder på knappar eftersom de kan göra det svårt att läsa knappens text om knapparna har text.