在HTML中,有三种设置Style的方法:
<link rel="stylesheet" href="a.css" type="text/css" />
<STYLE>
...
</STYLE>
<A STYLE="..." ID="Demo">Demo</A>
针对不同的情况,在脚本中也有对应的方法:
利用document对象的styleSheets属性返回所有用LINK引用的外部styleSheet文件的集合,然后利用styleSheet对象的rules属性返回rule集合,然后利用rule对象的style属性返回style对象,最后就可以获取相应的值了,代码如下:
css:
BODY {...}{font-size:12px;}
html:
<body>
<link rel="stylesheet" href="Untitled-2.css" type="text/css" id="out" />
<script language="javascript" type="text/javascript">...
var css = document.styleSheets;
var rules = css("out").rules;
alert(rules(0).style.fontSize); //12px
</script>
</body>
利用document对象的styleSheets属性返回所有HEAD中定义的STYLE的集合,然后利用styleSheet对象的rules属性返回rule集合,然后利用rule对象的style属性返回style对象,最后就可以获取相应的值了,代码如下:
<head>
<style type="text/css">...
BODY {...}{...}{...}{font-size:48px;}
</style>
<link rel="stylesheet" href="Untitled-2.css" type="text/css" id="out" />
</head>
<body>
Hello
<script language="javascript" type="text/javascript">......
var css = document.styleSheets;
//alert(css.length); //2
var rules = css(0).rules;
//alert(rules.length); //1
alert(rules(0).style.fontSize); //48px
</script>
</body>
</html>
<div style="font-size:24px" id="attri">World</div>
<script language="javascript" type="text/javascript">...
alert(attri.style.fontSize);
</script>