Comment obtenir les propriétés CSS dans js
Nov 09, 2020 pm 02:49 PMMé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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes

Comment définir une bordure pointillée HTML
