用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
2014-09-19 18:50
471 查看
CSS样式定义方法
大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表。1、内联样式:
内联样式表就是在HTML元素中的行内直接添加style属性。<div id="div1" style="width: 100px; height: 100px; background: black"> </div>
2、内部、外部样式表:
内部样式表就是在<head>头部里有<style>标签,外部样式表<link>标签引用的外部样式表文件(*.css)。<head> <style> #div1 { width:200px; height:200px; background:black} //这里是内部样式表 </style> <link rel="stylesheet" type="text/css" href="example.css" > //这里是外部样式表,引用了外部的example.css文件 </head>
通常来说,内部样式表会比较少用,为了使HTML文档中看起来更简洁,一般脚本程序和样式表都是从外部引用的。
CSS样式表定义的优先级
说完了关于样式表的定义方法之后,我们再了解一下CSS样式表定义的优先级。(我们这里只是简单说一下,这三种CSS样式的优先级关系,有关CSS选择器的优先级,会单独再开一帖)有一句话是这样说的:近水楼台先得月。从这个方面去想就可以很清楚了。
浏览器默认属性<外部样式表<内部样式表<内联样式
当样式定义有重复时,会优先使用最内层的样式定义。所以我们一般做样式修改时候,修改的便是内联样式或者是用类选择器修改样式
查看CSS属性
1、查看内联样式
查看CSS属性,一般大家最常用的,最了解的一种方法就是用 object.style.***<script> window.onload = function(){ var oDiv = document.getElementById('div1'); alert( oDiv.style.width ); //"100px" 这里是字符串,显示的是内联样式 } </script>
上面那个仅仅是查看内联样式单个属性的,要是有需要查看所有的属性,可以使用obj.cssText或者obj.getAttribute("style");待会儿会详细说明。
谨记!它们都是无法取得样式表中的属性值。
object.style 它显示的仅仅是内联样式的属性,即使样式表定义了,用style.width也无法得到它的值(求宽度的话,这个时候大家最好用obj.offsetWidth, 但是获得的不带单位的值,要注意一下)
2、查看样式表(getComputedStyle,currentStyle)
查看样式表的某个属性就没有上面那么简单啦。这里要用到一个方法 getComputedStyle(object,null)[name],第二个参数是放伪元素的(:after之类的),如果不需要就要设置为null。
这个方法厉害了,顾名思义,获得计算后的style,也就是说。你要取得的属性要最后最终确定的样式属性,包括样式表和内联样式。
//内联样式的width删除后 var divWidth = getComputedStyle(oDiv,null)['width'] alert( divWidth) // "200px" , 这个是样式表中定义的宽度。 IE中不兼容。
大家也看到了,我在注释上写了个IE不兼容。 这么好的属性,竟然不兼容,可恨!
不过还好,IE也有它自己定义的方法 obj.currentStyle[name] .代码我就不写啦,和上面差不多。
让我们来写个可以兼容共用的方法
function getStyle(obj,name){ if(obj.currentStyle){ //判断浏览器是否拥有该方法 return obj.currentStyle[name]; }else{ return getComputedStyle(obj, null)[name]; } }
这样我们就“可以”获取我们想要的CSS属性啦!嗯,专门做个蓝色的坑标注。
(用这个方法时,name参数必须是完整的且驼峰形的,也就是background-color要写成backgroundColor,缩写什么的当然也不行。还有border,有的浏览器还要分,左框宽,右框宽,这里那么多大坑,我就不一一阐述了。)
所以大家用这个getStyle(obj,name),务必多加注意!希望各位同学可以多多上手实践感受感受。
修改CSS属性
终于到了最后一个环节了。同样修改CSS属性有几种方法,一个一个来说。
1、obj.style.xxx = val
这个是应用最广泛,也是用起来比较得心应手的啦!它的原理也就是通过添加内联样式,去覆盖样式表中的样式。
2、obj.style.cssText = "xxx", obj.setAttribute("style","xxx")
为什么这两个放在一起说呢?因为,这两个有许多的共通点,但是实际操作我会建议使用前者。oDiv.setAttribute('style','width:300px') ; //他们修改的都是内联样式。 oDiv.style.cssText = "width:300px";
注意! 这两个方法都是会覆写内联样式,就是说,原本的内联样式会被全部清除。而且setAttribute,不兼容IE6这个老古董。
所以要修改内联样式的属性,可以采用 obj.style.cssText
3、obj.className = "xxx"
这个是我们常说的添加class类。这个是通用的,没什么好说。如果要用到setAttribute来设置class的话,就要关注到,在IE里是setAttribute("className","xxx")
而其它浏览器一致都是 setAttribute("class","xxx") 与内联样式的class属性相对应。(不推荐这种方法)
CSS移除样式。
对于内联样式,我们可以采用下列的方法。oDiv.cssText = ""; //等于移除了所有内联样式,若不需要全部移除,可以补回 oDiv.removeAttribute("style")
通过清空内联样式,被覆盖的样式表属性,就可以重现天日了。
当然除了内联样式还有样式表中的类选择器也是可以移除的。
oDiv.className = ""; oDiv.removeAttribute("class"); //非IE7 oDiv.removeAttribute("className"); //IE7
最后,我抱歉的说一句,我不知道怎么用JS修改样式表中的样式,要是有知道的同学可以留下你的评论。
以上是我的学习小总结,或许有不全面或者错误的地方,欢迎指正!
相关文章推荐
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
- 对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)
- JS基础篇--JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
- js获取css值的方法:style、getComputedStyle和currentStyle
- js获取css值的方法:style、getComputedStyle和currentStyle
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
- js用currentStyle和getComputedStyle获取css样式(非行间)
- js用currentStyle和getComputedStyle获取css样式(非行间)
- (转) js用currentStyle和getComputedStyle获取css样式(非行间)
- js获取css值的方法:style、getComputedStyle和currentStyle
- js中style,currentStyle,getComputedStyle和getBoundingClientRect的区别以及获取css操作方法
- js中style、currentStyle、getComputed、runtimeStyle的区别
- JS使用getComputedStyle()方法获取CSS属性值
- js获取样式、currentStyle和getComputedStyle的兼容写法
- js便签笔记(7)——style、currentStyle、getComputedStyle区别介绍【转载】
- js中return,this,arguments,currentStyle和getComputedStyle小析
- JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
- js-style,currentStyle与getComputedStyle()
- JS中style、currentStyle、getComputedStyle的区别