Comment obtenir la valeur de l'attribut CSS dans js-js tutoriel-php.cn

Comment obtenir la valeur de l'attribut CSS dans js

青灯夜游

Libérer： 2023-01-07 11:42:12

original

8243 Les gens l'ont consulté

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é".

Comment obtenir la valeur de l'attribut CSS dans js

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 <style type='text/css'>

<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>

Copier après la connexion

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>

Copier après la connexion

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];
        }
}

Copier après la connexion

[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!