使用javascript無法獲取html元素的顏色

直到在腳本中設置後，我才能使用javascript獲取html元素的顏色。例如：使用javascript無法獲取html元素的顏色

<html> 
<head> 
    <style media="screen" type="text/css"> 
     h1 { 
      color: purple; 
     } 
    </style> 
    <script type="text/javascript"> 
     function test() { 
      var header = document.getElementsByTagName("h1")[0]; 
      alert("Colour: " + header.style.color); // Does not get the correct colour 
      header.style.color = "yellow"; 
      alert("Colour: " + header.style.color); // Gets the correct colour 
     } 
    </script> 
</head> 
<body onload="test();"> 
    <h1>Header</h1> 
</body> 
</html>

我希望第一個警報，以示「顏色：紫色」中的CSS和第二組，以顯示「顏色：黃色」從功能本身。但是，第一個警報只顯示「顏色：」。在這兩種情況下，元素的顏色都是正確的，並使用螢火蟲進行驗證。

來源

2015-06-07 Gaz01

可能重複[如何在javascript得到一個HTML元素的樣式值？（http://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-in-javascript） – Martin

element.style.property僅得到直接的要素分配CSS屬性。要獲取實際屬性值，無論它被分配的位置（外部樣式表或內聯）使用window.getComputedStyle(element).property，其中元素是對元素的引用。

所以，在你的榜樣將是：

alert("Colour: " + getComputedStyle(header).color);

見定義：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

的

來源

2015-06-07 11:49:15 Tigran

謝謝，這使我朝着正確的方向前進。對於其他人發現這一點，在分號前還沒有一個閉幕的腦袋。 – Gaz01

對不起。我糾正了這個錯誤。 – Tigran

幾乎 - 這是我的工作 - 警報（「顏色：」+ window.getComputedStyle（header）.color）; – Gaz01

對於通過CSS進行樣式設置的元素，要獲取其渲染樣式，您需要使用getComputedStyle。

alert(getComputedStyle(header).color) // the color you want

來源

2015-06-07 11:44:31 Leo

使用javascript無法獲取html元素的顏色

回答

相關問題