css 与 javascript 资料不通

Tags:

繁中版

CSS 写入 html 的值，用Javascript 却没办法取得，这么简单的问题，我却一直都没发现，真是改用Jquery 后，实在是太方便，基础越来越差了。

假设我们先用CSS指定div的宽，范例如下。

<style>
.data{
   width:200px;
}
</style>
<div class="data"  id="data">test</div>

用JS抓div的宽，这样写的话，就会抓到空值。

var s=document.getElementById('data');
alert( s.style.width );

解决方式1：将div需要的 css 用 inline 的方式写入，这样就能用 Javascript 抓到

<div style="width:100px;"></div>

解决方式2：抓 getComputedStyle 的值

function getStyleAttr(attr){
   var em = document.getElementById('data');
   var defaultView = em.ownerDocument.defaultView;
   if (defaultView ) {
      var computedStyle = defaultView.getComputedStyle(em, null );
      if (computedStyle ) {
         return computedStyle.getPropertyValue(attr);
      }
   }
 
   else if(em.currentStyle){
      return  em.currentStyle[attr];
   }
 
}

网页好读版

This post was last modified by puritys 2012/12/25