使用selectorText对象

课后整理 2020-12-20

使用selectorText对象可以获取样式的选择器字符串表示。

【示例】在下面这个示例中,使用selectorText属性获取第1个样式表(styleSheets[0])中的第3个样式(cssRules[2])的选择器名称,输出显示为“.blue”。

<style  type="text/css">
#box  { color:green; }
.red  { color:red; }
.blue  { color:blue; }
</style>
<link  href="style1.css" rel="stylesheet" type="text/css"  media="all" />
<script>
window.onload  = function(){ 
    var cssRules =  document.styleSheets[0].cssRules || document.styleSheets[0].rules;
    var box =  document.getElementById("box");
    box.innerHTML =  "第一个样式表中第三个样式选择符 = " +  cssRules[2].selectorText;
}
</script>
<div  id="box"></div>