如何在不使用內聯樣式表的情況下將此元素的顏色傳遞給javascript？

我的問題與this one非常相似，因爲我需要將元素具有的背景色傳遞給javascript函數。不同的是，我不想被元素本身之外定義的顏色，樣式表：如何在不使用內聯樣式表的情況下將此元素的顏色傳遞給javascript？

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 

     button.red_button { 
      background: red; 
      cursor: pointer; 
      border: none; 
      width: 48px; 
      height: 48px; 
     } 

     </style> 

    </head> 

    <body> 

     <button class="red_button" onclick="javascript:changeColor(this)"></button> 

     <p id="change_me">Click on the red box to change this text to red!</p> 

     <script> 
      function changeColor(button) { 
       document.getElementById("change_me").style.color = button.style.background; 
      } 
     </script> 
    </body> 
</html>

當背景顏色聯定義它工作正常，但似乎無法找到它時，它的外部聲明。

來源

2016-10-31 Jon McClung

['window.getComputedStyle（）']（https://developer.mozilla.org/ en-US/docs/Web/API/Window/getComputedStyle） – nnnnnn

您可以使用getComputedStyle方法來獲取按鈕上應用的所有樣式。然後，它適用於文本

function changeColor(button) { 
    var style = window.getComputedStyle(button); 
    document.getElementById("change_me").style.color = style['background-color']; 
}

DEMO

來源

2016-10-31 05:17:42 brk

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 

 
     button.red_button { 
 
      background: red; 
 
      cursor: pointer; 
 
      border: none; 
 
      width: 48px; 
 
      height: 48px; 
 
     } 
 

 
     </style> 
 

 
    </head> 
 

 
    <body> 
 

 
     <button class="red_button" onclick="changeColor('#ff0000');"></button> 
 

 
     <p id="change_me">Click on the red box to change this text to red!</p> 
 

 
     <script> 
 
      function changeColor(color) { 
 
       document.getElementById("change_me").style.color = color; 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

我所做的是什麼，我改了一下腳本，讓你設置的函數的顏色，它自動上色地點

來源

2016-10-31 05:17:49

我想使用樣式表來保存顏色，而不是元素本身。這不是簡單的做'style =「background：red」' –

As @nnnnnn提到y您可以同時使用getComputedStyle()讓你的元素的CSS，只需.style只得到元素的內嵌style屬性：

function changeColor(button) { 
    document.getElementById("change_me").style.color = getComputedStyle(button)['background-color']; 
}

來源

2016-10-31 05:21:12

如何在不使用內聯樣式表的情況下將此元素的顏色傳遞給javascript？

回答

相關問題