Explication détaillée de la méthode de lecture et d'écriture des styles CSS en javascript natif

J'ai rencontré ce problème récemment pendant mes études. Afin de faciliter les recherches futures, j'ai examiné certaines informations et résumé les méthodes suivantes, qui sont uniquement natives de JS. S'il y a quelque chose qui ne va pas, veuillez le signaler ! J'espère juste que tout le monde aura le sentiment d'avoir appris quelque chose après l'avoir lu ! L'article suivant présente principalement la méthode d'utilisation du javascript natif pour lire et écrire des styles CSS. Les amis dans le besoin peuvent s'y référer.

Préface

Peut-être que lorsque vous parlez du fonctionnement des styles CSS, beaucoup de gens penseront à la méthode CSS de jQuery : $(selector).css(name) , mais il y en a quelques réflexions Avez-vous déjà réfléchi à la façon d'utiliser JS natif pour réaliser des fonctions similaires ?

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).

Grâce à la recherche et à l'organisation, j'ai résumé la mise en œuvre de la lecture et de l'écriture de styles CSS à l'aide de js natif. Pas grand chose à dire ci-dessous, jetons un œil à l’introduction détaillée.

Obtenez du style

1. Seuls les styles en ligne peuvent être obtenus :

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

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

currentStyle

Cette méthode n'est applicable qu'aux navigateurs IE. Sa forme est similaire à La différence est que, tout comme le nom de currentStyle - le style actuel (le style après le chargement du CSS), elle renvoie le CSS final actuel. valeur d'attribut de l'élément. Y compris les styles dans les balises de style internes et les 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 :

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

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

3. getComputedStyle

getComputedStyle est une méthode qui peut obtenir toutes les valeurs finales des propriétés CSS utilisées de l'élément courant. 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.

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

pour encapsuler une fonction générale pour obtenir le style

afin d'être applicable à tous Pour les principaux navigateurs grand public, écrivons une fonction :

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

function getStyle(el, styleName) {

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

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

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

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

Cette fonction ne prend pas en compte les opérations associées des pseudo-classes et peut être étendue selon les besoins~

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 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 peuvent être différent dans différents environnements), et Il vaut 0.

Cité de l'article du blog de Zhang Xinxuelement.styleelement.style

Définition du style

1. >

Inutile de dire, par exemple, de changer la couleur de fond de l'élément en rouge :

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

2. Attribut cssText

L'essence de cssText est de définir la valeur de l'attribut de style de l'élément 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. Son utilisation est similaire à innerHTML :

Pour des explications plus détaillées sur la façon dont le javascript natif implémente la lecture et l'écriture des styles CSS, veuillez faire attention au site Web PHP chinois pour les articles connexes !