如何訪問使用外部樣式表的javascript對象的樣式屬性？

我有一個外部的樣式表與此在它：如何訪問使用外部樣式表的javascript對象的樣式屬性？

.box { 
padding-left:30px; 
background-color: #BBFF88; 
border-width: 0; 
overflow: hidden; 
width: 400px; 
height: 150px; 
}

然後我有這樣的：

<div id="0" class="box" style="position: absolute; top: 20px; left: 20px;">

當我再嘗試訪問div的寬度：

alert(document.getElementById("0").style.width);

出現一個空白警報框。如何訪問在我的樣式表中定義的width屬性？

注意：div顯示正確的寬度。

來源

2009-07-28 Jesse Gibbs

你可以重現問題並給我看一個測試用例嗎？ – 2009-07-28 11:22:41

您應該使用window.getComputedStyle來獲得該值。如果您正在查找CSS值，我建議不要使用offsetWidth或clientWidth，因爲它們會返回包含填充和其他計算的寬度。

使用getComputedStyle，你的代碼將是：

var e = document.getElementById('0'); 
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width");

該文檔在MDC給出：window.getComputedStyle

來源

2009-07-28 11:38:42 aditya

offsetWidth顯示您的div的實際寬度：

alert(document.getElementById("0").offsetWidth);

這個寬度可以是你在你的CSS已經設置不同，雖然。 jQuery的方法是（我真的不想提他們所有的時間，但是這就是所有的庫都存在於）：

$("#0").width(); // should return 400 
$("#0").offsetWidth(); // should return 400 as well 
$("#0").css("width"); // returns the string 400px

來源

2009-07-28 11:35:08 Daff

簡單的javascript警報不起作用。結果未定義。 – 2009-07-28 11:39:56

我希望這是有幫助的：

 function changecss(theClass,element,value) { 
//Last Updated on June 23, 2009 
//documentation for this script at 
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html 
var cssRules; 

var added = false; 
for (var S = 0; S < document.styleSheets.length; S++){ 

if (document.styleSheets[S]['rules']) { 
    cssRules = 'rules'; 
} else if (document.styleSheets[S]['cssRules']) { 
    cssRules = 'cssRules'; 
} else { 
    //no rules found... browser unknown 
} 

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) { 
    if (document.styleSheets[S][cssRules][R].selectorText == theClass) { 
    if(document.styleSheets[S][cssRules][R].style[element]){ 
    document.styleSheets[S][cssRules][R].style[element] = value; 
    added=true; 
    break; 
    } 
    } 
    } 
    if(!added){ 
    if(document.styleSheets[S].insertRule){ 
      document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length); 
     } else if (document.styleSheets[S].addRule) { 
      document.styleSheets[S].addRule(theClass,element+': '+value+';'); 
     } 
    } 
} 
}

它取自here。

來源

2009-07-28 11:37:49

的答案大多是正確的，但將在當您嘗試使用做你的頭他們依賴於瀏覽器的渲染模式（又名嚴格/怪癖模式，瀏覽器供應商等） - 最後的答案是最好的...使用jQuery。

來源

2009-07-28 11:58:41 Mathew

如何訪問使用外部樣式表的javascript對象的樣式屬性？

回答

相關問題