為什么我不能使用JavaScript訪問CSS屬性？

Question

我無法使用以下代碼在div -element上檢索CSS屬性：

 function myFunction() { console.log( document.getElementById("myDiv").style.borderTopColor ); }

 div { border-top-width: 15px; border-top-color: green; }

 <div id="myDiv">This is a div.</div> <button type="button" onclick="myFunction()">Return top border color</button>

Answer 1

結合他人的評論和答案。 有關詳細信息，請參閱這些內容。

做兩個改變，使其工作

添加邊框樣式： border-top-style: solid;
修改JS代碼以獲取邊框顏色： alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);

  <!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <style> div { border-top-width: 15px; border-top-color: green; border-top-style: solid; } </style> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Return top border color</button> <script> function myFunction() { alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor); } </script> </body> </html>

Answer 2

使用getComputedStyle獲取屬性值。除非指定了樣式，否則邊框也不可見。

以下代碼段將以RGB格式返回顏色代碼

 function myFunction(elem) { var elem1 = document.getElementById(elem); var style = window.getComputedStyle(elem1, null); var getBorderTop = style.getPropertyValue("border-top-color") console.log(getBorderTop); }

 div { border-style: solid; border-top-width: 15px; border-top-color: green; }

 <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction('myDiv')">Return top border color</button>

Answer 3

它應該是

     function myFunction() {  
   alert(window.getComputedStyle( document.getElementById("myDiv")).borderTopColor)
            }

在這里玩

Answer 4

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
    border: thick solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Change color of the top border</button>

<script>
function myFunction() {
    alert(document.getElementById("myDiv").style.borderTopColor = "red");
}
</script>

</body>
</html>

這對於更改頂部邊框顏色是正確的。

每當我們在樣式標簽中定義樣式道具時，我們都有權對其進行更改，並按照代碼中的說明正確定義樣式道具。

我希望你能理解上面的代碼。 如果有任何疑問，你可以問我

Answer 5

您沒有為邊框設置樣式。 默認情況下為空。 邊框樣式

或者，您也可以使用border-top: 15px solid green;

另外，要獲取未內聯定義的樣式，還必須使用window.getComputedStyle

 div { border-top-width: 15px; border-top-color: green; border-top-style: solid; }

 <!DOCTYPE html> <html> <meta charset="UTF-8"> <head> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Return top border color</button> <script> function myFunction() { var elem = document.getElementById("myDiv"); var style = window.getComputedStyle(elem, null); alert(style.borderTopColor); } </script> </body> </html>

Answer 6

嘗試這樣的事情：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mystyle
{
  border-top: 15px solid green;      
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return top border color</button>
<script>
function myFunction() {
       document.getElementById("myDiv").className = "mystyle"; 
}
</script>
</body>
</html>

為什么我不能使用JavaScript訪問CSS屬性？

問題描述

6 個解決方案

解決方案1
1 已采納 2017-10-24 04:37:41

解決方案2
0 2017-10-24 04:43:52

解決方案3
0 2017-10-24 04:49:15

解決方案4
0 2017-10-24 05:00:56

解決方案5
-1 2017-10-24 04:30:30

解決方案6
-1 2017-10-24 04:50:19

為什么我不能使用JavaScript訪問CSS屬性？

問題描述

6 個解決方案

解決方案1 1 已采納 2017-10-24 04:37:41

解決方案2 0 2017-10-24 04:43:52

解決方案3 0 2017-10-24 04:49:15

解決方案4 0 2017-10-24 05:00:56

解決方案5 -1 2017-10-24 04:30:30

解決方案6 -1 2017-10-24 04:50:19

解決方案1
1 已采納 2017-10-24 04:37:41

解決方案2
0 2017-10-24 04:43:52

解決方案3
0 2017-10-24 04:49:15

解決方案4
0 2017-10-24 05:00:56

解決方案5
-1 2017-10-24 04:30:30

解決方案6
-1 2017-10-24 04:50:19