Funksjon for å endre knappens bakgrunn i HTML

Hvis du vil at knappene på websidene dine skal ta opp oppmerksomhet, må du gjøre mer enn bare legge dem til HTML-koden din ved hjelp av "input" -koder. Knapper, som standard, har grå bakgrunn med svart tekst. En enkel JavaScript-funksjon kan endre en kjedelig knapp bakgrunn i en fargerik eller til og med pynte den med et bilde av ditt valg.

Opprette knapper

Uten CSS-formatering vises koden som trengs for å opprette en grunnleggende nettside-knapp som følger:

Du har muligheten til å legge til en CSS-klassenavn som angir knappens bakgrunn til gul som vist her:

Følgende CSS-klasse, plassert i dokumentets stilavdeling, oppretter denne klassen:

.styleButton {bakgrunnsfarge: Gul;}

Endre "Gul" til en gyldig HTML-farge for å oppnå det utseendet du ønsker. Du kan legge til et bilde på knappens bakgrunn i stedet ved å bruke følgende CSS-kode:

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

Erstatt "myImage.jpg" med URL-adressen til et bilde på nettet eller URL-adressen til et bilde på webserveren din.

Funksjonsparametere

Følgende eksempel viser rammen til en funksjon som endrer knappens bakgrunn:

funksjonsendringBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Endre knappens bakgrunnsbilde}

ellers {// Endre knappens bakgrunnsfarge}}

Denne funksjonen aksepterer tre parametere. ButtonID inneholder ID-knappen for knappen du vil endre. Bakgrunnstypevariabelen kan ha en verdi på "farge" eller "bilde". Den endelige parameteren, buttonBackground, inneholder fargen du vil legge til på knappen eller URL til et bilde. Koden behandler logikken som er definert i den første "if" -blokken hvis du sender "bilde" som bakgrunnstypens verdi. Ellers kjører det setningene i "ellers" -blokken og endrer knappens bakgrunnsfarge.

Kode logikk

Følgende kode viser de setningene som trengs for å legge til et bakgrunnsbilde til en knapp, eller endre bakgrunnsfargen avhengig av verdien som er passert i parameteren backgroundType:

funksjonsendringBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Endre knappens bakgrunnsbilde var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

ellers {// Endre knappens bakgrunnsfarge document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Hvis du ringer til funksjonen og sender den til en bakgrunnType av "bilde", angir koden knappens bakgrunnsvisningsattributt til fargen som er passert i knappenBackground-variabelen. Ellers angir koden knappens backgroundColor-attributt til fargen som er passert i knappenBackground-variabelen.

Tips

Når du bruker funksjonen til å legge til et bilde i en bakgrunn, velg en som er liten nok til å passe inn i knappen. HTML reduserer ikke et bildes størrelse slik at det passer uten et sidestykke. Du kan også gjøre knappbakgrunnene flytte, pulsere eller glø ved å legge til små, animerte GIFS til dem. Vær forsiktig når du legger komplekse bilder på knapper fordi de kan gjøre det vanskelig å lese knappens tekst hvis knappene har tekst.