Maison > interface Web > js tutoriel > Comment obtenir les propriétés CSS dans js

Comment obtenir les propriétés CSS dans js

coldplay.xixi
Libérer: 2020-11-17 18:16:04
original
1767 Les gens l'ont consulté

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

Comment obtenir les propriétés CSS dans js

[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);//弹出空的对话框
}
}
Copier après la connexion

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
}
}
Copier après la connexion

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
Copier après la connexion

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

alert(a.backgroundColor);//red
Copier après la connexion

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);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal