使用JavaScript從外部CSS文件得到一個元素的樣式

我有這樣的HTML：使用JavaScript從外部CSS文件得到一個元素的樣式

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" media="all" href="style.css"> 
    </head> 

    <body> 
     <div id="test">Testing</div> 

     <script> 
      alert(document.getElementById('test').style.display); 
     </script> 
    </body> 
</html>

的style.css中：

div { 
    display:none; 
}

我期望JS將返回「無「，但它會返回一個空字符串。有什麼辦法可以解決這個問題嗎？

來源

2010-04-01 Alan

這將適用於符合標準的瀏覽器（不是IE - currentStyle/runtimeStyle）。

<body> 
    <div id="test">Testing</div> 

    <script type="text/javascript"> 
     window.onload = function() { 
      alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display')); 
     } 
    </script> 
</body>

來源

2010-04-01 04:13:11 Jonathan

加載一個150KB庫來做一些在vanilla JS中是單線程的東西？你是認真的嗎？ – 2010-04-01 04:15:28

謝謝。但是，我們的網頁將用於移動設備，因此我們需要儘量減少網頁的大小。因此不建議使用jquery。有沒有其他方法可以達到相同的效果？ – Alan 2010-04-01 04:16:47

可能值得一提的是，在這個問題上。特殊的手機？有不少人根本不支持JS。 – Jonathan 2010-04-01 04:22:14

由於display沒有直接作爲樣式屬性設置，所以不會使用上述代碼。你必須得到計算值。

您可以參考這個網頁，Get styles

，以獲得CSS不會沒有加載值

var displayValue = getStyle("test", "display"); 

function getStyle(el,styleProp) 
{ 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
}

來源

2010-04-01 04:09:50 rahul

感謝。但我怎麼能得到計算值？ – Alan 2010-04-01 04:14:10

編輯我的答案。 – rahul 2010-04-01 04:46:14

該函數非常基本，它會由兩個或更多個單詞（即'font-size'，'background-color'等）形成的CSS屬性名稱出現問題，並且'getComputedStyle'方法應該從' document.defaultView'對象，因爲並非所有的瀏覽器在Global對象（'window'）上都有'defaultView'成員可用，並且存在更多不一致性，請查看我所做的這個實現：http://stackoverflow.com/questions/2531737/javascript-incapable-of-getting-elements-max-height-via-element-style-maxheight/2531934＃2531934 – CMS 2010-04-01 05:36:30

。將您的JavaScript封裝在「準備就緒」事件中。

<body onload="alert(document.getElementById('test').style.display);">

爲你做這項工作？

來源

2010-04-01 04:10:57

謝謝。有沒有例子？ – Alan 2010-04-01 04:17:33

不起作用= [ – Alan 2010-04-01 04:27:31

使用JavaScript從外部CSS文件得到一個元素的樣式

回答

相關問題