javascript obtenir un exemple de code de style CSS d'élément

Il existe quatre façons d'utiliser CSS pour contrôler la page, à savoir le style en ligne (style en ligne), le style en ligne, le style de lien et le style importé.

Les styles en ligne (styles en ligne) sont écrits dans l'attribut style de la balise HTML, tel que <div></div>

Les styles en ligne sont écrits dans la balise de style, telle que <style type="text/css">div{width:100px height:100px></style>;

Le type de lien consiste à utiliser la balise de lien pour introduire le fichier CSS, tel que <link href="test.css" type="text/css" rel="stylesheet" />

La méthode d'importation consiste à utiliser l'importation pour introduire des fichiers CSS, tels que @import url("test.css")

Si vous souhaitez utiliser JavaScript pour obtenir les informations de style d'un élément, la première chose qui vous vient à l'esprit est l'attribut de style de l'élément. Cependant, l'attribut style d'un élément représente uniquement le style en ligne de l'élément. Si une partie des informations de style d'un élément est écrite dans le style en ligne et qu'une partie est écrite dans le fichier CSS externe, les informations de style complètes de l'élément ne peuvent pas. être obtenu via l'attribut style . Par conséquent, vous devez utiliser le style calculé de l’élément pour obtenir les informations de style de l’élément.

Utilisez la méthode getComputedStyle de l'objet window pour obtenir le style calculé d'un élément. Cette méthode a 2 paramètres. Le premier paramètre est l'élément dont le style calculé doit être obtenu. Le deuxième paramètre peut être nul, une chaîne vide ou un pseudo-. classe (telle que : before,:after), les deux paramètres sont obligatoires.

Donnons un exemple

<style type="text/css">

#testDiv{

bordure : 1 px rouge uni ;

largeur : 100 px ;

hauteur : 100px ;

couleur : rouge ;

}

</style>

<div id="testDiv"></div>

var testDiv = document.getElementById("testDiv");

var computingStyle = window.getComputedStyle(testDiv, "");

var width = computingStyle.width; //100px

var hauteur = calculéeStyle.hauteur; //100px

var color = ComputedStyle.color; //rgb(255, 0, 0)

[/code]

Remarque : Les attributs de couleur obtenus sont tous renvoyés au format rgb(#,#,#).

À l'heure actuelle, si vous utilisez testDiv.style pour obtenir des informations de style, testDiv.style.width sera définitivement vide.

La méthode getComputedStyle n'est pas implémentée dans IE8 et les versions antérieures, mais chaque élément d'IE possède sa propre propriété currentStyle.

Alors, prenons une question générale

Copiez le code comme suit :

var testDiv = document.getElementById("testDiv");

var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;

var largeur = styleInfo.width; //100px;

var hauteur = styleInfo.hauteur; //100px;

var color = styleInfo.color; // rgb(255, 0, 0)

Enfin, veuillez noter que le style calculé d'un élément est en lecture seule. Si vous souhaitez définir le style d'un élément, vous devez utiliser l'attribut style de l'élément (c'est le véritable objectif de l'attribut style de l'élément). .