JavaScript对css样式表操作

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript对css样式表操作相关的知识，希望对你有一定的参考价值。

CSS样式表3种方式：

内嵌：写在html标签中的样式 ；如：<p style="width:100px"> 内嵌</p>

内联：写在html 中<head></head>之间的样式表

　　　　<head>

　　　　　　<style>

　　　　　　</style>

　　　　</head>

外联：通过<head>标签中的<link >标签中链接的css样式表

js对内嵌操纵：

　　<p style="width:100px" id="p"> 内嵌</p>

　　var p=document.getElementById("p");

　　p.style.width="200px";

　　将p标签的宽度改为了200px；

js操作内联样式：

<script type="text/javascript">

方法一： 

 

function getStyle(selector, attr) {
for(i = 0, len = document.styleSheets.length; i < len; i++) {
var rules;
if(document.styleSheets[i].rules) {
/*for ie*/ 
rules = document.styleSheets[i].rules;
} else {
/*for 非ie*/
rules = document.styleSheets[i].cssRules;
}
for(j = 0, rlen = rules.length; j < rlen; j++) {
if(rules[j].selectorText == selector) {
alert(rules[j].style[attr]);
}
}
}
}

 

</script>

方法二：

<script type="text/javascript">

IE：elementObj.currentStyle

w3c标准：window.getComputedStyle(elementObj, null)  或 document.defaultView.getComputedStyle(elementObj, null )

document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(id,null).getPropertyValue("background-color"):id.currentStyle["backgroundColor"]; 

</scirpt>

　　

以上是关于JavaScript对css样式表操作的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript脚本化CSS样式表

原生JavaScript(JS)修改添加CSS样式表 （更好的性能）

使用 javascript 重新加载 CSS 样式表

Javascript_动态修改css样式方法汇总

javascript 动态修改css样式方法汇总(四种方法)

vs2010打开样式表css提示未能完成操作未指定的错误