Exemple
Ajouter une couleur rouge à un <h1> élément:
document.getElementById("myH1").style.color = "red";
Avant de définir le style:
Hello World!
Après avoir défini le style:
Hello World!
Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété de style retourne un objet CSSStyleDeclaration, qui représente l'attribut de style d'un élément.
La propriété de style est utilisé pour obtenir ou définir un style spécifique d'un élément en utilisant différentes propriétés CSS.
Note: Il est impossible de définir des styles en attribuant une chaîne à la propriété de style, par exemple élément .style = "color: red;" . Pour définir le style d'un élément, ajoutez un "CSS" propriété de style et de spécifier une valeur, comme ceci:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Comme vous pouvez le voir, la syntaxe JavaScript pour définir les propriétés CSS est légèrement différent de celui CSS (backgroundColor instead of background-color) au (backgroundColor instead of background-color) - (backgroundColor instead of background-color) .
Pour une liste de toutes les propriétés disponibles, consultez notre style objet de référence .
Note: La propriété de style renvoie uniquement les déclarations CSS définies dans l'attribut de l' élément de style en ligne, par exemple
<P style = "color: red;">. Il est impossible d'utiliser cette propriété pour obtenir des informations sur les règles de style de la <head> section dans le document ou les feuilles de style externes.
Cependant, vous pouvez accéder au <style> élément de <head> en utilisant le document. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Note: Il est recommandé d'utiliser la propriété de style au lieu de l' element . setAttribute("style", "...") méthode, parce que la propriété de style ne remplace pas les autres propriétés CSS qui peuvent être spécifiées dans le style de l' attribut.
Support du navigateur
Propriété | |||||
---|---|---|---|---|---|
style | Oui | Oui | Oui | Oui | Oui |
Syntaxe
Retour propriétés de style:
element .style. property
Définir les propriétés de style:
element .style. property = value
Valeurs de propriété
Valeur | La description |
---|---|
value | Indique la valeur de la propriété spécifiée. Par exemple, pour la propriété borderBottom: élément .style.borderBottom = "red solide 2px"; |
Détails techniques
Valeur de retour: | Un objet CSSStyleDeclaration, ce qui représente l'attribut de style d'un élément |
---|---|
version DOM | Dom Niveau 2 CSS |
autres exemples
Exemple
Obtenez la valeur d'un <p> bordure supérieure de l' élément:
var x = document.getElementById("myP").style.borderTop;
Le résultat de x sera:
5px solid red
Essayez vous - même » Pages associées
Tutoriel CSS: CSS Tutorial
CSS Référence: Propriétés CSS
HTML DOM Référence: style Référence objet
HTML Référence: HTML <style> balise
<Object Élément