javascript中elm.style.xxx无法获取到CSS值

示例代码如下:

.d1{color:#f00;}

<div id=”d1″class=”d1″>kljdslfkj</div>

此时使用JS的style获取他的color属性:

var d1=document.getElementById(‘d1’);

alert(d1.style.color);

奇怪的是,弹出一个空值,没有任何内容,也不报错。但如果用d1.style.color=”#00f”来设置d1的CSS却正确执行。

百思不得其解,上网一搜,发现原因非常坑爹。

解释说elm.style只能获取到elm标签上类似style=””定义的CSS属性,我靠,那怎么得到通过class来声明的属性呢?

IE中用elm.currentStyle.color的语句来获得——这种方法还能接受。

但自诩标准的W3C获取方法如下:

var d1 =document.getElementById(‘d1’);
alert(window.getComputedStyle(d1,null).color);
要用到一个很生的JS语句:getComputedStyle。这不重要,坑爹的是这个语句的使用方法,居然要通过window对象调用!参数居然是两个而且第二个就算是空的也不能省略!这条语句对比起elm.style甚至elm.currentStyle都要繁琐的多,而且打乱了一般的JS编程习惯。

虽然通过getComputedStyle真的能取到对应的CSS值,但这个方法不得不说实在是坑爹!

 

发表评论

电子邮件地址不会被公开。