Comment obtenir la valeur de l’attribut de style d’un élément ?

Si vous souhaitez obtenir une valeur d'attribut de style spécifique d'un élément, que devez-vous faire ? Ci-dessous, je vais vous montrer comment je l'ai fait, j'espère que cela pourra vous aider.

1. Element.style.Attribute name

Nous devons écrire le style de l'élément en ligne. style Seulement alors (l'écrire dans la feuille de style ne fonctionnera pas)

console.log(box.style.height) ->null

Dans les projets réels, cette méthode n'est pas couramment utilisée car tous les styles ne peuvent pas être écrits en ligne afin d'obtenir la valeur (la séparation du html et du css ne peut pas être réalisée )

2. Utilisez window.getComputedStyle (l'objet élément de l'opération en cours, la pseudo-classe de l'élément courant [généralement on n'écrit pas null dans la pseudo-classe]) pour obtenir tous les styles calculés par le navigateur

Tous les styles calculés par le navigateur : Tant que la balise d'élément actuelle peut être rendue sur la page, alors tous ses styles sont calculés par le navigateur (rendu ) -> Même si vous n'avez pas écrit certains styles, nous pouvons toujours obtenir

Le résultat obtenu est une instance de CSSStyleDeclaration. classe : elle contient l'élément actuel Tous les attributs et valeurs de style

console.log(window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["hauteur"]

3. Bien que la méthode soit simple à utiliser, elle n'est pas compatible sous IE6-8 : car il n'y a pas d'attribut getComputedStyle sous window -> 🎜>

Sous IE6-8, on peut utiliser currentStyle pour récupérer tous les styles calculés par le navigateur

console.log( box.currentStyle)

console.log(box.currentStyle.height)

Récupérer la méthode d'écriture compatible de style getCss : Récupérer l'élément courant Les valeurs correspondant à [attr] dans tous les styles calculés par le navigateur

/*curEle:[object] 当前要操作的元素对象 
            attr:[string] 我们要获取的样式属性的名称
            1、使用try、catch来处理兼容（只有在不得已的情况下）
               前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
               不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
            2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
            3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
            获取当前浏览器是IE6-8            */function getCss(curEle,attr){var val = null;//方法2if("window.getComputedStyle" in window){//或者window.getComputedStylevar = window.getComputedStyle(curEle,null)[attr];
            }else{var = curEle.currentStyle[attr];
            }//方法1try{var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){var = curEle.currentStyle[attr];
            }//方法3if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

standard Les résultats obtenus par les navigateurs et les navigateurs IE sont toujours différents -> Pour certains attributs de style, les résultats obtenus par différents navigateurs sont différents, principalement parce que getComputedStyle et currentStyle sont différents dans certains aspects

Pour les valeurs de style composite, vous pouvez les diviser pour obtenir

console.log(getCss(box, "marginTop"))

Le getCss ci-dessus n'a pas encore été écrit, procédons à la

première mise à jour : supprimez « unit » de la valeur de style obtenue (parseFloat ne peut que être utilisé s'il correspond à "numéro + unité/numéro")

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position  margin  padding  border    这些复合值 background    }

Deuxième mise à niveau : certains attributs de style sont incompatibles dans différents navigateurs, comme l'opacité

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1}else{
                    val = curEle.currentStyle[attr];
                }                
            }else{//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filterval = window.getComputedStyle(curEle,null)[attr];
            }}

J'ajoute un petit point de connaissance : pseudo -class

:before :after Créer une nouvelle étiquette virtuelle avant ou après une note d'élément On peut ajouter des styles à cette étiquette virtuelle, ou ajouter du contenu, etc... On peut aussi. effacer le flotteur via les pseudo-classes Vous pouvez obtenir window.getComputedStyle(box,"before").content

de la manière suivante

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!