首页 > 代码库 > 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

2024-07-23 09:22:55   218人阅读

CSS样式定义方法

大家都知道，在为HTML设置样式的时候，通常有三种方法：内联样式，内部样式表，外部样式表。

内联样式：

　　内联样式表就是在HTML元素中的行内直接添加style属性。

 

1 <div id="div1" style="width: 100px; height: 100px; background: black">2 </div>

 

 内部、外部样式表：

　　内部样式表就是在<head>头部里有<style>标签，外部样式表<link>标签引用的外部样式表文件（*.css）。

 

1 <head>2 <style>3 　　#div1 { width:200px; height:200px; background:black}   //这里是内部样式表4 </style>5 <link rel="stylesheet" type="text/css" href="example.css" >   //这里是外部样式表，引用了外部的example.css文件6 </head>

　　　通常来说，内部样式表会比较少用，为了使HTML文档中看起来更简洁，一般脚本程序和样式表都是从外部引用的。

 

CSS样式表定义的优先级　

　　说完了关于样式表的定义方法之后，我们再了解一下CSS样式表定义的优先级。（我们这里只是简单说一下，这三种CSS样式的优先级关系，有关CSS选择器的优先级，会单独再开一帖）

　　有一句话是这样说的：近水楼台先得月。从这个方面去想就可以很清楚了。

　　浏览器默认属性<外部样式表<内部样式表<内联样式

 

　　当样式定义有重复时，会优先使用最内层的样式定义。所以我们一般做样式修改时候，修改的便是内联样式或者是用类选择器修改样式

 

查看CSS属性

  • 查看内联样式

　　查看CSS属性，一般大家最常用的，最了解的一种方法就是用 object.style.***

1 <script>2 window.onload = function(){3     var oDiv = document.getElementById(‘div1‘);4     alert( oDiv.style.width );   //"100px" 这里是字符串，显示的是内联样式5 }6 </script>

 

　　上面那个仅仅是查看内联样式单个属性的，要是有需要查看所有的属性，可以使用obj.cssText或者obj.getAttribute("style");待会儿会详细说明。

 　　谨记！它们都是无法取得样式表中的属性值。

　　object.style 它显示的仅仅是内联样式的属性，即使样式表定义了，用style.width也无法得到它的值（求宽度的话，这个时候大家最好用obj.offsetWidth, 但是获得的不带单位的值，要注意一下）

　　

 

  •  查看样式表（getComputedStyle，currentStyle）

　　查看样式表的某个属性就没有上面那么简单啦。

　　这里要用到一个方法 getComputedStyle(object,null)[name]，第二个参数是放伪元素的(:after之类的)，如果不需要就要设置为null。

　　这个方法厉害了，顾名思义，获得计算后的style，也就是说。你要取得的属性要最后最终确定的样式属性，包括样式表和内联样式。

　　

1 //内联样式的width删除后2 3 var divWidth = getComputedStyle(oDiv,null)[‘width‘] 4 5 alert( divWidth) // "200px" , 这个是样式表中定义的宽度。 IE中不兼容。

 

　　大家也看到了，我在注释上写了个IE不兼容。 这么好的属性，竟然不兼容，可恨！

　　不过还好，IE也有它自己定义的方法 obj.currentStyle[name] .代码我就不写啦，和上面差不多。

 

　　让我们来写个可以兼容共用的方法

1 function getStyle(obj,name){2     if(obj.currentStyle){   //判断浏览器是否拥有该方法    3         return obj.currentStyle[name];4     }else{5         return getComputedStyle(obj, null)[name];6     }7 }

 

　　这样我们就“可以”获取我们想要的CSS属性啦！嗯，专门做个蓝色的坑标注。

　　（用这个方法时，name参数必须是完整的且驼峰形的，也就是background-color要写成backgroundColor，缩写什么的当然也不行。还有border，有的浏览器还要分，左框宽，右框宽，这里那么多大坑，我就不一一阐述了。）

　　所以大家用这个getStyle(obj,name),务必多加注意！希望各位同学可以多多上手实践感受感受。

修改CSS属性

　　终于到了最后一个环节了。

　　同样修改CSS属性有几种方法，一个一个来说。

 

  • obj.style.xxx = val

　　　　这个是应用最广泛，也是用起来比较得心应手的啦！

　　　　它的原理也就是通过添加内联样式，去覆盖样式表中的样式。

 

  •  obj.style.cssText = "xxx", obj.setAttribute("style","xxx")

　　　　为什么这两个放在一起说呢？因为，这两个有许多的共通点，但是实际操作我会建议使用前者。

oDiv.setAttribute(‘style‘,‘width:300px‘) ;  //他们修改的都是内联样式。oDiv.style.cssText = "width:300px";

　　　　注意！ 这两个方法都是会覆写内联样式，就是说，原本的内联样式会被全部清除。而且setAttribute,不兼容IE6这个老古董。

　　　　　　　　所以要修改内联样式的属性，可以采用 obj.style.cssText

 

  • obj.className = "xxx"

　　　　这个是我们常说的添加css类。这个是通用的，没什么好说。

　　　　如果要用到setAttribute来设置class的话，就要关注到，在IE7里是setAttribute("className","xxx")

　　　　而其它浏览器一致都是 setAttribute("className","xxx") 与内联样式的class属性相对应。

 

　　请神容易送神难，移除样式。

　　　　对于内联样式，我们可以采用下列的方法。

1 oDiv.cssText = ""; //等于移除了所有内联样式，若不需要全部移除，可以补回2 oDiv.removeAttribute("style")

 

　　　　通过清空内联样式，被覆盖的样式表属性，就可以重现天日了。

　　　　当然除了内联样式还有样式表中的类选择器也是可以移除的。

1 oDiv.className = "";2 oDiv.removeAttribute("class");  //非IE73 oDiv.removeAttribute("className"); //IE7

 

 

 

 

最后，我抱歉的说一句，我不知道怎么用JS修改样式表中的样式，要是有知道的同学可以留下你的评论。

以上是我的学习小总结，或许有不全面或者错误的地方，欢迎指正！

 

用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）


联系
我们