Functie om de achtergrond van de knop in HTML te wijzigen

Als u wilt dat de knoppen op uw webpagina's de aandacht trekken, moet u meer doen dan gewoon toevoegen aan uw HTML-code met behulp van "invoer" -tags. Knoppen hebben standaard grijze achtergronden met zwarte tekst. Een eenvoudige JavaScript-functie kan de achtergrond van een saaie knop veranderen in een kleurrijke achtergrond of deze zelfs verfraaien met een afbeelding naar keuze.

Knoppen maken

Zonder CSS-opmaak ziet de code die nodig is om een ​​eenvoudige webpagina-knop te maken er als volgt uit:

U hebt de mogelijkheid om een ​​CSS-klassenreferentie toe te voegen die de achtergrond van de knop in geel zet, zoals hier wordt getoond:

De volgende CSS-klasse, geplaatst in de stijlsectie van uw document, maakt die klasse:

.styleButton {background-color: Yellow;}

Wijzig 'Geel' in een geldige HTML-kleur om de gewenste look te krijgen. U kunt in plaats daarvan een afbeelding toevoegen aan de achtergrond van de knop door de volgende CSS-code te gebruiken:

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

Vervang "myImage.jpg" door de URL van een afbeelding op internet of de URL van een afbeelding op uw webserver.

Functieparameters

Het volgende voorbeeld toont het kader van een functie die de achtergrond van een knop verandert:

functie changeAchtergronden (knopID, achtergrondtype, knopachtergrond) {if (backgroundType == "afbeelding") {// achtergrondafbeelding van knop wijzigen}

else {// Achtergrondkleur van knop wijzigen}}

Deze functie accepteert drie parameters. De knop-ID bevat de ID van de knop die u wilt wijzigen. De variabele backgroundType kan de waarde "color" of "image" hebben. De laatste parameter, button Achtergrond, bevat de kleur die u aan de knop of de URL van een afbeelding wilt toevoegen. De code verwerkt de logica die is gedefinieerd in het eerste "if" -blok als u "image" doorgeeft als de waarde van het backgroundType. Anders voert het de instructies in het "else" -blok uit en verandert de achtergrondkleur van de knop.

Code Logic

De volgende code bevat de instructies die nodig zijn om een ​​achtergrondafbeelding aan een knop toe te voegen of de achtergrondkleur ervan te wijzigen, afhankelijk van de waarde die is doorgegeven in de parameter backgroundType:

functie changeAchtergronden (knopID, achtergrondtype, knopachtergrond) {if (backgroundType == "afbeelding") {// knop achtergrond wijzigen var urlValue = "URL ('" + button Achtergrond + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// De achtergrondkleur van de knop wijzigen document.getElementById (buttonID) .style.backgroundColor = button Achtergrond; }}

Als u de functie aanroept en een achtergrondtype 'afbeelding' doorgeeft, stelt de code het attribuut backgroundImage van de knop in op de kleur die is doorgegeven in de variabele button background. Anders stelt de code het attribuut backgroundColor van de knop in op de kleur die is doorgegeven in de variabele button Backgroung.

Tips

Wanneer u de functie gebruikt om een ​​afbeelding aan een achtergrond toe te voegen, kiest u een afbeelding die klein genoeg is om in de knop te passen. HTML verkleint de afbeeldingsgrootte niet om te passen zonder een pagina-element. U kunt ook de achtergrond van de knoppen laten bewegen, pulseren of gloeien door er kleine geanimeerde GIFS aan toe te voegen. Wees voorzichtig bij het plaatsen van complexe afbeeldingen op knoppen, omdat deze het moeilijk kunnen maken om de tekst van de knop te lezen als uw knoppen tekst bevatten.