Résumé des exemples de méthodes pour obtenir divers attributs de style CSS en javascript natif

La méthode la plus familière pour manipuler les styles dans les js natifs est l'objet Style dans le DOM. Cependant, cette méthode ne peut obtenir et modifier que les styles en ligne dans les documents HTML et ne peut pas utiliser les styles non en ligne (styles internes et). feuilles de style externes).

Obtenez du style

1. >Cette méthode ne peut obtenir que des styles en ligne :

2 currentStyle

var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'

Cette méthode ne fonctionne que dans. Navigateur IE, sa forme est similaire à . La différence est que currentStyle est exactement comme son nom - le style actuel (le style après le chargement du CSS) renvoie la valeur de l'attribut CSS final actuel de l'élément, y compris le style actuel. balise de style interne et fichiers CSS importés en externe.

Utilisation : element.currentStyle.property

element.stylePar exemple, nous voulons obtenir la largeur de la boîte avec l'identifiant :

3. getComputedStyle

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'

getComputedStyle est une méthode qui peut obtenir toutes les valeurs finales des propriétés CSS de l'élément actuel. Ce qui est renvoyé est un objet de déclaration de style CSS ([object CSSStyleDeclaration]) et est en lecture seule.
En terme de compatibilité, il supporte essentiellement : Chrome, Firfox, IE9, Opera, Safari

Utilisation : getComputedStyle (élément, pseudo-classe Attribut, si le deuxième paramètre n'est pas un). pseudo-classe Définissez-le sur null.

Venez encapsuler une fonction générale pour obtenir des styles

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

Afin d'être applicable aux principaux navigateurs grand public, écrivons une fonction :

Appelez ensuite cette fonction pour obtenir la largeur de la boîte :

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

This function Il ne prend pas en compte les opérations associées sur les pseudo-classes. Vous pouvez l'étendre selon vos besoins~

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

var boxWidth = getStyle(box, 'width');

Quelle est la différence entre getComputedStyle et style ?

Puisqu'ils obtiennent tous les deux la valeur de l'attribut style, quelle est la différence entre eux :

Lecture seule et écriture

La méthode

getComputedStyle est en lecture seule et ne peut obtenir que le style mais pas le définir, mais peut à la fois lire et écrire.

La plage d'objets obtenueelement.style

La méthode getComputedStyle obtient tous les objets d'attribut CSS qui sont finalement appliqués à l'élément (même s'il n'y a pas de code CSS, les huit ancêtres par défaut les générations seront affichées) et element.style ne peut obtenir le style CSS que dans l'attribut style de l'élément. Par conséquent, pour un élément nu e388a4556c0f65e1904146cc1a846bee, la valeur de l'attribut length (le cas échéant) renvoyée par la méthode getComputedStyle dans l'objet est 190+ (d'après mes tests, FF : 192, IE9 : 195, Chrome : 253, les résultats peut être différent selon les environnements), et element.style est 0.

Définir le style

1. pas nécessaire Parlons, par exemple, changeons la couleur d'arrière-plan de l'élément en rouge :

2. attribut cssText

L'essence de cssText est de définir la valeur de l'attribut de style des éléments HTML. Il s'agit d'une représentation textuelle d'un ensemble de propriétés de style et de leurs valeurs. Ce texte est formaté comme une feuille de style CSS, avec les accolades entourant le sélecteur d'élément de l'attribut et de la valeur supprimées.

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

Son utilisation est similaire à innerHTML :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!