Question

我无法使用以下代码检索div - 元素上的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);

＆＃13;

 <!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>

＆＃13;

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)
            }

播放here

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

您没有为边框设置样式。默认情况下，它是none。 Border-top-style

或者您也可以使用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 个答案: