Wie erhalte ich den Stilattributwert eines Elements?

Was müssen Sie tun, wenn Sie einen bestimmten Stilattributwert eines Elements erhalten möchten? Im Folgenden werde ich Ihnen zeigen, wie ich es gemacht habe. Ich hoffe, es kann Ihnen helfen.

1. Element.style.Attribute name

Wir müssen den Stil des Elements in die Inline schreiben style Nur dann (das Schreiben im Stylesheet funktioniert nicht)

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

In realen Projekten wird diese Methode nicht häufig verwendet, da nicht alle Stile inline geschrieben werden können, um den Wert zu erhalten (die Trennung von HTML und CSS kann nicht erreicht werden )

2. Verwenden Sie window.getComputedStyle (das Elementobjekt der aktuellen Operation, die Pseudoklasse des aktuellen Elements [normalerweise schreiben wir nicht null in die Pseudoklasse]), um abzurufen alle vom Browser berechneten Stile

Alle vom Browser berechneten Stile: Solange das aktuelle Element-Tag auf der Seite gerendert werden kann, werden alle seine Stile von berechnet der Browser (gerendert) -> Auch wenn Sie einige Stile nicht geschrieben haben, können wir dennoch

erhalten. Das erhaltene Ergebnis ist eine Instanz der CSSStyleDeclaration Klasse: Es enthält das aktuelle Element. Alle Stilattribute und -werte

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

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

3. Obwohl die Methode einfach zu verwenden ist, ist sie unter IE6-8 nicht kompatibel: Da es unter window kein getComputedStyle-Attribut gibt, wird ein Fehler gemeldet

Unter IE6-8 können wir currentStyle verwenden, um alle vom Browser berechneten Stile zu erhalten

console.log( box.currentStyle)

console.log(box.currentStyle.height)

Holen Sie sich die kompatible Schreibmethode des Stils getCss: Holen Sie sich das aktuelle Element. Die Werte, die [attr] in allen vom Browser berechneten Stilen entsprechen

/*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 Die von Browsern und IE-Browsern erhaltenen Ergebnisse sind immer noch unterschiedlich -> Bei einigen Stilattributen sind die von verschiedenen Browsern erhaltenen Ergebnisse unterschiedlich, hauptsächlich weil getComputedStyle und currentStyle in einigen unterschiedlich sind Aspekte

Für zusammengesetzte Stilwerte können Sie sie aufteilen, um

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

Das obige getCss ist noch nicht fertig, fahren wir mit dem ersten Upgrade fort: Entfernen Sie die „Einheit“ aus dem erhaltenen Stilwert (parseFloat kann nur verwendet werden, wenn es mit „Zahl + Einheit/Zahl“ übereinstimmt.

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    }

Zweites Upgrade: Einige Stilattribute sind in verschiedenen Versionen nicht kompatibel Browser wie Opazität

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

Ich füge einen kleinen Wissenspunkt hinzu: Pseudo -class

:before :after Erstellen Sie ein neues virtuelles Etikett vor oder nach einer Elementnotiz. Wir können diesem virtuellen Etikett Stile hinzufügen oder Inhalte hinzufügen usw. Wir können auch Löschen Sie den Float durch Pseudoklassen. Sie können window.getComputedStyle(box,"before").content

auf folgende Weise erhalten

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Stilattributwert eines Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!