Question

我想从javascript文件中获取 元素背景值 。我有三个文件 -

中将Html.HTML
css.css
js.js

中将Html.HTML

<!DOCTYPE html>
<html>
<head>
    <title> I'm Button! </title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div class="myBlock" onclick="heyJS()"></div>

</body>
</html>

css.css

.myBlock {
  width: 300px; max-width: 100%;
  height: 100px; max-height: 100%;
  margin: 0 auto; margin-top: 100px; 
  font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
  line-height: 100px; position: relative;
  background-color: #83DF31;
}

js.js

function heyJS() {
    alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}

运行scrpit后，我只得到空白警告框。

如何获得 div背景值 ？

Answer 1

您可以使用此

替换警报（）

alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);

或

alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);

如果您使用第一个，请稍微修改您的HTML。

<div id="myBlock" class="myBlock" onclick="heyJS()"></div>

Answer 2

尝试以下方法：

window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");

我如何从外部JS文件获得外部CSS值？

2 个答案: