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.