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

Comment obtenir les propriétés CSS dans js

Nov 09, 2020 pm 02:49 PM
propriétés CSS 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);].

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!

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

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

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 Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

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 Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

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 Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Dec 17, 2023 am 08:08 AM

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 Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

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

Que signifie groove en CSS Que signifie groove en CSS Apr 28, 2024 pm 04:12 PM

Que signifie groove en CSS

La relation entre js et vue La relation entre js et vue Mar 11, 2024 pm 05:21 PM

La relation entre js et vue

Comment définir une bordure pointillée HTML Comment définir une bordure pointillée HTML Apr 05, 2024 am 09:36 AM

Comment définir une bordure pointillée HTML

See all articles