Comment obtenir les propriétés CSS dans js

Méthode JS pour obtenir les attributs css : utilisez la méthode [getComputedStyle(div)] pour obtenir, le code est [var a = document.defaultView.getComputedStyle(div);].

[Articles connexes recommandés : vue.js]

Méthode JS pour obtenir les attributs CSS :

Lorsque vous utilisez JS natif pour le développement, vous devriez rencontrer le besoin d'obtenir des attributs CSS, puis découvrir Il semble que l'accès direct ne soit pas possible. Voici deux façons d'obtenir des attributs CSS en js natif

L'acquisition directe échouera Par exemple,

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
alert(div.style.width);//弹出空的对话框
}
}

Utilisez la méthode getComputedStyle(div)

Exemple d'utilisation

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
var a = document.defaultView.getComputedStyle(div);
alert(a.width);//100px
}
}

Notes

1. Ce que vous obtenez est le style calculé par le navigateur Si vous obtenez l'arrière-plan, vous obtiendrez les résultats suivants

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

Veuillez donc indiquer clairement ce que vous voulez. Le style obtenu est comme ceci

alert(a.backgroundColor);//red

2 Ne pas avoir d'espaces lors de l'écriture du nom

'div' ne peut pas être 'div'

3. , incompatible

Pour résoudre la compatibilité : IE8 et les versions inférieures ne peuvent pas utiliser la méthode getComputedStyle, mais utilisent la méthode currenrStyle

a = div.currentStyle;
alert(a.width);

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!