为什么javascript无法获得样式值，但可以对其进行更改？ [英] Why javascript can't get the style value but can change it?
问题描述
我需要将标签数据传递给该函数并在该函数中读取它，
我试图通过 this传递标签，我可以更改某些样式元素，但无法读取样式数据那里。是什么问题
I need to pass the tag data to the function and read it in that function , I tried to pass the tag via "this" , i could change some style elements but i couldn't read the style data there. What is the problem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<script>
function paint(tab){
window.alert(tab.style.backgroundColor); // It can't show current color
tab.style.backgroundColor="#000000";
}
</script>
<style>
div.vtab {
background-color:#ff0000;
height: 80px;
left: 20px;
position: absolute;
width: 80px;
cursor:pointer;
}
</style>
</head>
<body>
<div onclick="javascript:paint(this)" class="vtab" ></div>
</body>
</html>
推荐答案
样式对象仅将样式信息专门应用于元素，而没有通过样式表应用于其的信息。因此，首先，您的 tab.style.backgroundColor 将为空白，因为没有 style = background-color：...
The style object on elements only has the style information applied specifically to the element, not information applied to it via stylesheets. So to start with, your tab.style.backgroundColor will be blank, because there's no style="background-color: ..." on the element.
要获取元素的 compute 样式，请使用 getComputedStyle 函数（在任何现代版本上）或 currentStyle 属性（在旧版IE上）：
To get the computed style of an element, you use the getComputedStyle function (on anything modern) or the currentStyle property (on old IE):
alert(getComputedStyle(tab).backgroundColor);
对于旧的IE，很容易添加简单的垫片：
For old IE, a simple shim is easily added:
if (!window.getComputedStyle) {
window.getComputedStyle = function(element, pseudo) {
if (typeof pseudo !== "undefined") {
throw "The second argument to getComputedStyle can't be polyfilled";
}
return element.currentStyle;
};
}
示例：
if (!window.getComputedStyle) {
window.getComputedStyle = function(element, pseudo) {
if (typeof pseudo !== "undefined") {
throw "The second argument to getComputedStyle can't be polyfilled";
}
return element.currentStyle;
};
}
var div = document.querySelector(".foo");
snippet.log("Background color before changing: " +
getComputedStyle(div).backgroundColor);
setTimeout(function() {
div.style.backgroundColor = '#4ff';
snippet.log("Background color after changing: " +
getComputedStyle(div).backgroundColor);
}, 1000);
.foo {
background-color: #ff4;
}
<div class="foo">My background is yellow to start with, because of the class <code>foo</code>, then code turns it cyan</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
这篇关于为什么javascript无法获得样式值，但可以对其进行更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
