码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript对css样式表操作

时间:2016-05-22 16:43:10      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

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样式表操作

标签:

原文地址:http://www.cnblogs.com/lilinfeng569482/p/5516855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!