遇到一个小问题,这里记录一下,免得忘记。
关于js获取样式的。
比较常用的方法是:element.style.width.这种用法有2个注意点:
1、style获取到的是html中标签的内嵌样式,例如:
<div id="div1" style="width:100px"></div>
<script>
var div1 = document.getElementById("div1");
console.log(div1.style.width);
</script>
这里输出就为100px。
2、要注意的是这里的width是有单位的,并且是一个字符串,所以在js中如果要设置它记得加上“px”(或者其他单位),而如果要在js中使用这个数值,则记得用parseInt()来转换。
例如:
console.log(div1.style.width);
console.log(parseInt(div1.style.width));
第一行输出的是100px,第二行就是100了。O(∩_∩)O~·~
在第1点里有说到,这是获取内嵌样式的方法,那么如果要获取最终所有的css样式的话,就要用到别的方法:
在IE里面的是currentStyle,而在别的浏览器中是getComputedStyle,2者方法略有区别。
currentStyle是DOM元素的属性,使用方法:
obj.currentStyle[attribute]
getComputedStyle是DOM的一个全局方法,使用:
getComputedStyle(obj,"伪类")[attribute]
可以将他们写成一个方法:
function getStyle(obj,arr){
if(obj.currentStyle){
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj,false)[arr];
}
}
另外要注意的是:getComputedStyle方法是一个只读方法,不能设置,
更详细的相关设置,可参考别人总结的:【转】http://www.zhangxinxu.com/wordpress/?p=2378