Maison > Article > interface Web > Comment obtenir la valeur de l'attribut CSS dans js

Comment obtenir la valeur de l'attribut CSS dans js

青灯夜游original: 2021-07-07 15:24:308165parcourir

Comment obtenir la valeur de l'attribut CSS dans js : 1. Obtenez-la via l'attribut style de l'objet élément, la syntaxe est « element object.style.property name » 2. Grâce à l'attribut getComputerStyle, la syntaxe est « getComputerStyle » ; .nom de la propriété".

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

obj.style:

Cette méthode ne peut obtenir que la valeur écrite dans l'attribut style, mais ne peut pas obtenir les attributs définis dans 1f9ab55d55ddd0862161573b29712484

<style type=”text/css”> 
.ss{color:#cdcdcd;}  
</style>  
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值
</div>  
<script type=”text/javascript”> 
alert(document.getElementById(“css88″).style.width);//200px 
alert(document.getElementById(“css88″).style.color);//空白 
</script>

obj.currentStyle et getComputerStyle

obj.currentStyle n'est pris en charge que par IE, et getComputerStyle est pris en charge dans FireFox. Cette méthode accepte deux paramètres : l'élément pour obtenir le style calculé et une chaîne de pseudo-élément (telle que ";after"). Si les informations sur les pseudo-éléments ne sont pas requises, le deuxième paramètre peut être nul. Cette méthode renvoie un objet CSSStyleDeclaration contenant tous les styles calculés pour l'élément actuel.

<html> 
<head> 
<title>计算元素样式</title> 
<style> 
#myDiv { 
    width:100px; 
    height:200px; 
} 
</style> 
<body> 
<div id ="myDiv" style=" border:1px solid black"></div> 
 
<script> 
var myDiv = document.getElementById("myDiv"); 
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 
 
alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle.border); //在某些浏览器中是“1px solid black” 
</script> 
</body> 
</head> 
</html>

On estime donc qu'il est compatible avec les navigateurs. Nous pouvons encapsuler une fonction pour obtenir la valeur de l'attribut CSS d'un élément :

function getStyle(element, attr) {
        if(element.currentStyle) {
                return element.currentStyle[attr];
        } else {
                return getComputedStyle(element, false)[attr];
        }
}

[Recommandations associées : Tutoriel d'apprentissage Javascript]

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!

JavaScript firefox css NULL 封装字符串 JS 对象伪元素

Déclaration：

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 précédent：Une analyse approfondie de Promise dans la programmation asynchrone NodejsArticle suivant：Une analyse approfondie de Promise dans la programmation asynchrone Nodejs

Articles Liés

Voir plus