Heim > Artikel > Web-Frontend > So erhalten Sie den CSS-Attributwert in js
So erhalten Sie den CSS-Attributwert in js
- 青灯夜游Original
- 2021-07-07 15:24:308174Durchsuche
So erhalten Sie den CSS-Attributwert in js: 1. Rufen Sie ihn über das Style-Attribut des Elementobjekts ab, die Syntax lautet „element object.style.property name“; 2. Über das getComputerStyle-Attribut lautet die Syntax „getComputerStyle“. .Eigenschaftsname".
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
obj.style:
Diese Methode kann nur den im Stilattribut geschriebenen Wert abrufen, nicht jedoch die in 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 und getComputerStyle
obj.currentStyle definierten Attribute. Wird nur vom IE unterstützt. und getComputerStyle wird in Firefox unterstützt. Diese Methode akzeptiert zwei Parameter: das Element, um den berechneten Stil zu erhalten, und eine Pseudoelementzeichenfolge (z. B. „; after“). Wenn keine Pseudoelementinformationen erforderlich sind, kann der zweite Parameter null sein. Diese Methode gibt ein CSSStyleDeclaration-Objekt zurück, das alle berechneten Stile für das aktuelle Element enthält.
<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>Es wird also geschätzt, dass es mit Browsern kompatibel ist. Wir können eine Funktion kapseln, um den CSS-Attributwert eines Elements zu erhalten:
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}[Verwandte Empfehlungen: Javascript-Lern-Tutorial]
Das obige ist der detaillierte Inhalt vonSo erhalten Sie den CSS-Attributwert in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!