返回到：DOM对象：CSS 样式声明对象
定义和使用
length 属性返回指定元素的样式声明数目。
所有主要浏览器都支持length属性
语法
返回 length 属性：
element.style.length技术细节
| DOM 版本: | CSS Object Model |
|---|---|
| 返回值: | 整数，表示 CSS 声明的数目 |
实例
DEMO1：返回 h1 元素样式的声明数目。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1 style="color: red; font-size: 50px;">length 属性</h1>
<p>点击按钮返回 h1 元素设置的样式数目。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt = document.getElementsByTagName("h1")[0];
var x = elmnt.style.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>实例
DEMO2：循环输出指定元素的所有内联 CSS 属性名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1 style="color: red; font-size: 50px; ">循环输出所有 CSS 属性</h1>
<p>点击按钮显示所有 h1 元素的 CSS 属性。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var elmnt, i, txt = "";
elmnt = document.getElementsByTagName("h1")[0];
for (i = 0; i < elmnt.style.length; i++) {
txt += elmnt.style.item(i) + "<br>";
}
document.getElementById("demo").innerHTML += txt;
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/3781.html
支付宝 
微信 