怎样知道CSS里面定义了哪些属性，prototype里面有这个功能吗，纯js的也可以,该怎么处理
日期：2014-05-16 浏览次数：20416 次
怎样知道CSS里面定义了哪些属性，prototype里面有这个功能吗，纯js的也可以
<style>
.test {font-size: 12px;margin-left: 1em;color:red}
</style>
我想取得test里面有哪些元素和属性，应该怎么做？
谢谢！
------解决方案--------------------
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
style 代表了给定元素所有可能的内嵌样式的当前设置。
------解决方案--------------------
参考：
<HTML>
<HEAD>
<SCRIPT>
function ruleColor(ruleIndex) {
alert( "The color of rule " + ruleIndex + " is " +
document.styleSheets[0].rules.item(ruleIndex).style.color + ". ");
}
</SCRIPT>
<STYLE>
.rule0 {color: "red "}
.rule1 {color: "blue "}
</STYLE>
</HEAD>
<BODY>
<P class= "rule0 " id= "oRule0Span ">
Rule 0 is applied to this line.
</P>
<P class= "rule1 " id= "oRule1Span ">
Rule 1 is applied to this line.
</P>
<BUTTON onclick= "ruleColor(0) "> Color of Rule 0 </BUTTON>
<BUTTON onclick= "ruleColor(1) "> Color of Rule 1 </BUTTON>
</BODY>
</HTML>
------解决方案--------------------
学习了~~jf~
------解决方案--------------------
学习了，jf
------解决方案--------------------
学习了，jf
------解决方案--------------------
学习了，jf
------解决方案--------------------
<SCRIPT LANGUAGE= "JavaScript ">
<!--
if(typeof(HTMLElement)!= "undefined " && !window.opera) //兼容FF
{
HTMLElement.prototype.__defineGetter__( "currentStyle ", function()
{
return this.ownerDocument.defaultView.getComputedStyle(this,null);
});
}
function listStyle(element)
{
var s = " ";
for(var i in element.currentStyle)
{
s += "style. "+ i + " = "+ element.currentStyle[i] + "\n ";
}
document.getElementById( "text ").value = s;
}
//-->
</SCRIPT>
<style>
.test {font-size: 12px;margin-left: 1em;color:red}
</style>
<body> <div class= "test " id= "mm "> className=test </div>
<input type= "button " value= "list currentStyle " onclick= "listStyle(document.getElementById( 'mm ')) " />
<textarea id= "text " style= "width: 100%; height: 300px; "> </textarea>
------解决方案--------------------
要取得.test的，就得遍历styleSheets了。
觉得hansonboy(hansonboy) 的办法比较符合楼主的要求吧。
------解决方案--------------------
高手,就是不一样.................
------解决方案--------------------
学习，收藏！
------解决方案--------------------
学习，收藏
<style>
.test {font-size: 12px;margin-left: 1em;color:red}
</style>
我想取得test里面有哪些元素和属性，应该怎么做？
谢谢！
------解决方案--------------------
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
style 代表了给定元素所有可能的内嵌样式的当前设置。
------解决方案--------------------
参考：
<HTML>
<HEAD>
<SCRIPT>
function ruleColor(ruleIndex) {
alert( "The color of rule " + ruleIndex + " is " +
document.styleSheets[0].rules.item(ruleIndex).style.color + ". ");
}
</SCRIPT>
<STYLE>
.rule0 {color: "red "}
.rule1 {color: "blue "}
</STYLE>
</HEAD>
<BODY>
<P class= "rule0 " id= "oRule0Span ">
Rule 0 is applied to this line.
</P>
<P class= "rule1 " id= "oRule1Span ">
Rule 1 is applied to this line.
</P>
<BUTTON onclick= "ruleColor(0) "> Color of Rule 0 </BUTTON>
<BUTTON onclick= "ruleColor(1) "> Color of Rule 1 </BUTTON>
</BODY>
</HTML>
------解决方案--------------------
学习了~~jf~
------解决方案--------------------
学习了，jf
------解决方案--------------------
学习了，jf
------解决方案--------------------
学习了，jf
------解决方案--------------------
<SCRIPT LANGUAGE= "JavaScript ">
<!--
if(typeof(HTMLElement)!= "undefined " && !window.opera) //兼容FF
{
HTMLElement.prototype.__defineGetter__( "currentStyle ", function()
{
return this.ownerDocument.defaultView.getComputedStyle(this,null);
});
}
function listStyle(element)
{
var s = " ";
for(var i in element.currentStyle)
{
s += "style. "+ i + " = "+ element.currentStyle[i] + "\n ";
}
document.getElementById( "text ").value = s;
}
//-->
</SCRIPT>
<style>
.test {font-size: 12px;margin-left: 1em;color:red}
</style>
<body> <div class= "test " id= "mm "> className=test </div>
<input type= "button " value= "list currentStyle " onclick= "listStyle(document.getElementById( 'mm ')) " />
<textarea id= "text " style= "width: 100%; height: 300px; "> </textarea>
------解决方案--------------------
要取得.test的，就得遍历styleSheets了。
觉得hansonboy(hansonboy) 的办法比较符合楼主的要求吧。
------解决方案--------------------
高手,就是不一样.................
------解决方案--------------------
学习，收藏！
------解决方案--------------------
学习，收藏
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
