CSSStyleDeclaration item() 方法 | CSS样式声明对象

返回到: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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年9月23日 下午5:02
下一篇 2021年9月23日 下午5:09

相关推荐

发表回复

登录后才能评论