HTML DOM Element style-attribut

Definition och användning

style egenskapen returnerar värdet för elementets style-attribut som CSSStyleDeclaration-objekt.

CSSStyleDeclaration-objektet innehåller alla inlinestylingsegenskaper för elementet. Det innehåller inte de som är satta i <head> alla style-attribut som är satta i delar eller i någon extern stylesida.

Punkt 1

Du kan inte sätta sådana stilar:

element.style = "color:red";

Du måste använda sådana CSS-attribut:

element.style.backgroundColor = "red";

Prova det själv

Punkt 2

JavaScript-syntax och CSS-syntax är något olika:

backgroundColor / background-color

Se vår Komplett referenshandbok för Style-objekt.

Punkt 3

Använd denna style-attribut istället för setAttribute() metodför att förhindra att andra egenskaper i style-attributet överskrivs.

Se också:

CSS-lärobok

CSS-referencehandbok

Style-objekt

HTML <style>-tag

Exempel

Exempel 1

Ändra färgen på "myH1":

document.getElementById("myH1").style.color = "red";

Prova det själv

Exempel 2

Hämta värdet för toppkanten av "myP":

let value = document.getElementById("myP").style.borderTop;

Prova det själv

Syntax

Returnera style-attribut:

element.style.property

Sätt style-attribut:

element.style.property = value

Egenskapsvärde

Värde Beskrivning
value

Specificera värde för egenskapen.

Exempel:

element.style.borderBottom = "2px solid red"

Returvärde

Typ Beskrivning
Objekt CSSStyleDeclaration-objektet för elementet.

Webbläsarstöd

element.style är en DOM Level 2 (2001) egenskap.

Alla webbläsare stöder det fullständigt:

Chrome IE Edge Firefox Safari Operan
Chrome IE Edge Firefox Safari Operan
Stöd 9-11 Stöd Stöd Stöd Stöd