Funktion til at ændre knap baggrunden i HTML

Hvis du vil have knapperne på dine websider for at fange opmærksomhed, skal du gøre mere end blot at tilføje dem til din HTML kode ved hjælp af "input" tags. Knapper har som standard grå baggrund med sort tekst. En simpel JavaScript-funktion kan ændre en kedelig knap baggrund til en farverig eller endda forkæle det med et billede efter eget valg.

Oprettelse af knapper

Uden CSS-formatering vises koden til oprettelse af en grundlæggende webside-knap som følger:

Du har mulighed for at tilføje en CSS-klasse reference, der angiver knappens baggrund til gul som vist her:

Den følgende CSS-klasse, der er placeret i dit dokuments stilafsnit, opretter denne klasse:

.styleButton {baggrundsfarve: gul;}

Skift "Gul" til enhver gyldig HTML-farve for at opnå det udseende, du ønsker. Du kan tilføje et billede til knappens baggrund i stedet ved at bruge følgende CSS-kode:

.styleButton {baggrundsbillede: url ('myImage.jpg');}

Udskift "myImage.jpg" med webadressen for ethvert billede på nettet eller webadressen på et billede på din webserver.

Funktionsparametre

Følgende eksempel viser rammerne for en funktion, der ændrer en knaps baggrund:

funktionskifteBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Skift knapens baggrundsbillede}

ellers {// Skift knapens baggrundsfarve}}

Denne funktion accepterer tre parametre. ButtonID indeholder ID'en for den knap, du ønsker at ændre. BackgroundType-variablen kan have en værdi af "farve" eller "billede". Den endelige parameter, buttonBackground, indeholder den farve, du vil tilføje til knappen eller webadressen på et billede. Koden behandler logikken defineret i den første "if" -blok, hvis du sender "image" som baggrundstypens værdi. Ellers udfører det udsagnene i "ellers" blokken og ændrer knappens baggrundsfarve.

Kode Logik

Følgende kode angiver de sætninger, der er nødvendige for at tilføje et baggrundsbillede til en knap eller ændre dens baggrundsfarve afhængigt af den værdi, der er passeret i backgroundType-parameteren:

funktion changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Skift knapens baggrundsbillede var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

ellers {// Skift knapens baggrundsfarve document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Hvis du kalder funktionen og sender den til en baggrundstype af "billede", indstiller koden knapens baggrundsbilledattribut til den farve, der sendes i knappen Bakgrundsvariabel. Ellers indstiller koden knapens baggrundsfarveattribut til den farve, der er passeret i knappen Bakgrunds-variabel.

Tips

Når du bruger funktionen til at tilføje et billede til en baggrund, skal du vælge en der er lille nok til at passe ind i knappen. HTML reducerer ikke billedets størrelse til at passe uden et sideelement. Du kan også gøre knap baggrunde bevæge sig, pulsere eller gloe ved at tilføje små animerede GIFS til dem. Vær forsigtig, når du placerer komplekse billeder på knapper, fordi de kan gøre det svært at læse knappens tekst, hvis dine knapper har tekst.

Populære Indlæg