2011
Dec
17

css 与 javascript 资料不通

Tags:
繁中版

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

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

  1. <style>
  2. .data{
  3.    width:200px;
  4. }
  5. </style>
  6. <div class="data"  id="data">test</div>
  7.  

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

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

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

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

解决方式2：抓 getComputedStyle 的值

  1. function getStyleAttr(attr){
  2.    var em = document.getElementById('data');
  3.    var defaultView = em.ownerDocument.defaultView;
  4.    if (defaultView ) {
  5.       var computedStyle = defaultView.getComputedStyle(em, null );
  6.       if (computedStyle ) {
  7.          return computedStyle.getPropertyValue(attr);
  8.       }
  9.    }
  10.  
  11.    else if(em.currentStyle){
  12.       return  em.currentStyle[attr];
  13.    }
  14.  
  15. }

This post was last modified by puritys


回應 (Leave a comment)

類別 CSS

Copyright &copy; 2014 PURITYS.COM. All rights reserved.