为什么我不能使用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