Använda färger med javaskript
Beskrivning

Ändra bakgrundsfärgen i ett dokument – genom att sätta värdet på document.bgColor till en ny färg – kan vi göra när som helst. Bakgrundsfärgen lägger vi i BODY-taggen, där vi kan använda antingen det hexadecimala färgvärdet föregånget av brädgårdstecknet ...

Exempel: <BODY bgColor="#c0c0c0">

eller ange någon av de 16 standardfärgerna

Exempel: <BODY bgColor="silver">

Webbsäkra färger antas visas likadant på alla skärmar. Här finns de 216 färgerna i tabeller.

Standardfärger
black (svart)
hexkod: #000000 		white (vit)
hexkod: #ffffff 		red (röd)
hexkod: #ff0000 		green (grön)
hexkod: #008000
       
blue (blå)
hexkod: #0000ff 		yellow (gul)
hexkod: #ffff00 		magenta
hexkod: #ff00ff 		cyan
hexkod: #00ffff
       
gray (grå)
hexkod: #808080 		lime
hexkod: #00ff00 		maroon (rödbrun)
hexkod: #800000 		purple (lila)
hexkod: #800080
       
navy (marinblå)
hexkod: #000080 		olive (olivgrön)
hexkod: #808000 		silver
hexkod: #c0c0c0 		teal (blågrön)
hexkod: #008080
       
Exempel

Följande kod ger en sida med en knapp. När vi klickar på knappen ändras sidans bakgrundsfärg från vit till svart. Ett nytt klick ger den vita bakgrunden tillbaka.

Lägg märke till att if()-satsen kräver att vi anger färgen med det hexadecimala värdet föregånget av brädgårdstecknet – #ffffff – här duger det inte med bara "white".

Observera att javaskript även här är skiftlägeskänsligt. Använd små bokstäver i de hexadecimala värdena.

Pröva:

<HTML>
<HEAD>
<TITLE>Testa färgbyte på bakgrund</TITLE>
<SCRIPT language = "JavaScript">
function bytBakgrund() { 
if (document.bgColor == '#ffffff') 
{
document.bgColor = 'black'
}
else
{
document.bgColor = 'white'
}
}
</SCRIPT>
</HEAD>
<BODY bgColor = 'white'>
<FORM>
<INPUT type = "button" value="Klicka här" onClick="bytBakgrund()">
</FORM>
</BODY>
</HTML>

Hexadecimala värden för webbsäkra färger

I tabellerna nedan hittar du de så kallade webbsäkra färgerna med deras hexadecimala värden. I vissa fall är det svårt att se värdet mot färgbakgrunden. Markera då värdet, så blir det lätt att läsa.

© SupportData.Net