HTML DOM -stijl Eigenschap
Voorbeeld
Voeg een rode kleur toe aan een <h1> element:
document.getElementById("myH1").style.color = "red";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De eigenschap style retourneert een CSSStyleDeclaration-object, dat het stijlkenmerk van een element vertegenwoordigt.
De stijleigenschap wordt gebruikt om een specifieke stijl van een element op te halen of in te stellen met behulp van verschillende CSS-eigenschappen.
Opmerking: Het is niet mogelijk om stijlen in te stellen door een tekenreeks toe te wijzen aan de eigenschap style, bijvoorbeeld element .style = "color: red;". Om de stijl van een element in te stellen, voegt u een "CSS"-eigenschap toe aan de stijl en geeft u een waarde op, zoals deze:
element.style.backgroundColor = "red"; // set the background color of an element to red
Zoals u kunt zien, is de JavaScript-syntaxis voor het instellen van CSS-eigenschappen iets anders dan CSS (backgroundColor in plaats van background-color).
Zie onze Style Object Reference voor een lijst van alle beschikbare eigenschappen .
Opmerking: de eigenschap style retourneert alleen de CSS-declaraties die zijn ingesteld in het inline-stijlkenmerk van het element, bijvoorbeeld
<p style="color: red;">. Het is niet mogelijk om deze eigenschap te gebruiken om informatie over stijlregels op te halen uit de <head>-sectie in het document of externe stylesheets.
U kunt het element <style> echter vanuit <head> openen met document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Opmerking: het wordt aanbevolen om de eigenschap style te gebruiken in plaats van de methode element .setAttribute("style", "...") , omdat de eigenschap style geen andere CSS-eigenschappen overschrijft die mogelijk zijn opgegeven in het kenmerk style.
Browserondersteuning
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Syntaxis
Retourstijleigenschappen:
element.style.property
Stijleigenschappen instellen:
element.style.property = value
Eigendomswaarden
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Technische details
| Winstwaarde: | Een CSSStyleDeclaration-object dat het stijlkenmerk van een element vertegenwoordigt |
|---|---|
| DOM-versie | Dom niveau 2 CSS |
Meer voorbeelden
Voorbeeld
Verkrijg de waarde van de bovenrand van een <p>-element:
var x = document.getElementById("myP").style.borderTop;
Gerelateerde pagina's
CSS-zelfstudie: CSS-zelfstudie
CSS-referentie: CSS-eigenschappen
HTML DOM-referentie: stijlobjectreferentie
HTML-referentie: HTML <style>-tag
❮ Elementobject