Propriété de style HTML DOM
Exemple
Ajoutez une couleur rouge à un élément <h1> :
document.getElementById("myH1").style.color = "red";
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété style renvoie un objet CSSStyleDeclaration, qui représente l'attribut de style d'un élément.
La propriété style est utilisée pour obtenir ou définir un style spécifique d'un élément à l'aide de différentes propriétés CSS.
Remarque : Il n'est pas possible de définir des styles en affectant une chaîne à la propriété style, par exemple element .style = "color: red;". Pour définir le style d'un élément, ajoutez une propriété "CSS" au style et spécifiez une valeur, comme ceci :
element.style.backgroundColor = "red"; // set the background color of an element to red
Comme vous pouvez le voir, la syntaxe JavaScript pour définir les propriétés CSS est légèrement différente de CSS (backgroundColor au lieu de background-color).
Pour une liste de toutes les propriétés disponibles, consultez notre Style Object Reference .
Remarque : La propriété style renvoie uniquement les déclarations CSS définies dans l'attribut de style en ligne de l'élément, par exemple
<p style="color: red;">. Il n'est pas possible d'utiliser cette propriété pour obtenir des informations sur les règles de style à partir de la section <head> du document ou des feuilles de style externes.
Cependant, vous pouvez accéder à l'élément <style> à partir de <head> en utilisant document.getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Remarque : Il est recommandé d'utiliser la propriété style au lieu de la méthode element .setAttribute("style", "...") , car la propriété style n'écrasera pas les autres propriétés CSS éventuellement spécifiées dans l'attribut style.
Prise en charge du navigateur
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Syntaxe
Propriétés de style de retour :
element.style.property
Définissez les propriétés de style :
element.style.property = value
Valeurs de propriété
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Détails techniques
| Valeur de retour : | Un objet CSSStyleDeclaration, représentant l'attribut de style d'un élément |
|---|---|
| Version DOM | Dom niveau 2 CSS |
Plus d'exemples
Exemple
Obtenez la valeur de la bordure supérieure d'un élément <p> :
var x = document.getElementById("myP").style.borderTop;
Pages connexes
Tutoriel CSS : Tutoriel CSS
Référence CSS : Propriétés CSS
Référence HTML DOM : Référence d'objet de style
Référence HTML : balise HTML <style>
❮ Objet élément