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

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（）

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 个解决方案

解决方案1
3 已采纳 2015-04-10 08:51:27

解决方案2
1 2015-04-10 08:53:08

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-04-10 08:51:27

解决方案2 1 2015-04-10 08:53:08

解决方案1
3 已采纳 2015-04-10 08:51:27

解决方案2
1 2015-04-10 08:53:08