我正在学习将辅助文件用于html页面。我正在尝试根据worker.js的返回值更新css变量。
如果我更新worker.addEventListener中的css变量，颜色将变为黄色。
如果我尝试在eventlistener之外更新css变量，则由于mood_color未定义，它没有任何作用。
是否可以通过html worker为变量赋值？
<style>
:root {
--mood-color: grey;
}
</style>
<body>
<h3 class="my_feelings" style="color: var(--mood-color)">
My Feelings
<h3>
</body>
$(document).ready(function(){
var worker = new Worker("/js/mood.js");
var mood_color;
worker.addEventListener('message', function(e){
mood_color = e.data;
console.log(mood_color[0].color) // prints "yellow";
// changes header color to yellow.
$(".my_feelings").get(0).style.setProperty("--mood-color", mood_color);
});
worker.postMessage("sunny");
console.log(mood_color[0].color) // prints "undefined";
// doesn't change mood color because mood_color is undefined
$('.my_feelings').on('click', function(){
$(".my_feelings").get(0).style.setProperty("--mood-color", mood_color);
});
});
var weather = [
{"weather": "sunny", "mood": "happy", "color": "yellow"},
{"weather": "rainy", "mood": "sad"}, "color": "blue"
];
self.addEventListener('message', function(e) {
var color = weather .filter(function(i, n){
return i.weather == e.data;
});
self.postMessage(color);
}, false);
答案 0 :(得分：1)
您的代码存在许多问题。除了语法错误：
此时未定义 mood_color，因为postMessage发送异步消息。由于它是异步的，因此直到稍后console.log运行之后，响应才会发生。
最终设置mood_color时，它将设置为对象的数组（在这种情况下仅为一个），而不是颜色，因为这是从工作人员传入的。具体来说，它设置为：
[ { weather: 'sunny', mood: 'happy', color: 'yellow' } ]
当您尝试将CSS变量设置为此时，该数组被强制为字符串"[object Object]"，而CSS变量被设置为该变量。这就是为什么文本最终变成黑色，而不是您在CSS中设置为灰色或试图将其更改为黄色的原因。 mood_color[0].color将获得实际的颜色值。