所以这是一个非常简单的应用程序。本质上，我的初始背景由 CSS 设置。我希望能够读取 javascript 中的当前背景颜色并更新它。目前，我在 updateBackground 函数中的警报根本没有显示任何文本，尽管我的 CSS 确实已加载并且没有由于等待 deviceReady 而导致的竞争问题。我可以通过在 javascript 中设置 backgroundColor 轻松解决这个问题，但我想了解这种行为。
CSS
body{
background-color: green;
}
Javascript
var updateBackground = function() {
alert(document.body.style.backgroundColor);
document.body.style.backgroundColor=document.body.style.backgroundColor == '#E4E4E4' ? 'green' : '#E4E4E4';
};
class App{
constructor() {
this.bindEvents();
}
bindEvents() {
document.addEventListener('deviceready', this.onDeviceReady, false);
}
onDeviceReady(){
document.addEventListener('touchstart', function() {
updateBackground();
}, false);
}
}
var app = new App();
最佳答案
document.body.style.backgroundColor 不会读取您的 css 文件中设置的颜色，只会读取您通过元素上的 style 属性设置的颜色。 getComputedStyle(document.body).getPropertyValue("background-color") 就是你想要的。
<html>
<head>
<style>
body{background-color: green}
</style>
<script>
function getStyle(){
alert(getComputedStyle(document.body).getPropertyValue('background-color'))
}
</script>
</head>
<body onload = 'getStyle()'>
</body>
</html>
关于javascript - 试图根据当前背景更改背景颜色 : background color has no value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30652652/