返回到:DOM对象:CSS 样式声明对象
定义和使用
item() 方法返回 CSS 样式中指定索引位置的属性名,索引值从 0 开始。
所有主要浏览器都支持item() 方法
语法
style.item(index)属性值
| 参数 | 描述 |
|---|---|
| index | 必需。一个数字,代码 CSS 样式属性的索引位置。 |
技术细节
| DOM 版本: | CSS Object Model |
|---|---|
| 返回值: | 字符串, 表示属性名。 |
实例
DEMO1:返回 id 为 ex1 元素对应样式的第一个属性名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>item() 方法</h1>
<p>点击按钮返回 id 为 ex1 元素对应样式的第一个属性名:</p>
<div id="ex1" style="color:blue; font-family:monospace;">一些文本</div>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var style = document.getElementById('ex1').style;
var propname = style.item(0);
alert(propname);
}
</script>
</body>
</html>DEMO2:循环输出元素的所有样式的属性名。
<!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/3794.html
支付宝
微信