Derniers tutoriels de développement web
 

HTML DOM style Propery

<Object Élément

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

Exemples

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