我正在学习如何在 html 页面中使用工作文件。我正在尝试根据 worker.js 返回的值更新 css 变量。
如果我更新 worker.addEventListener 中的 css 变量，颜色将变为黄色。
如果我尝试在 eventlistener 之外更新 css 变量，它不会执行任何操作，因为 mood_color 未定义。
是否可以从 html worker 为变量赋值？
<小时/>HTML
<style>
:root {
--mood-color: grey;
}
</style>
<body>
<h3 class="my_feelings" style="color: var(--mood-color)">
My Feelings
<h3>
</body>
jquery
$(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);
});
});
mood.js(html worker )
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);
$(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);
最佳答案
您的代码存在许多问题。除了语法错误之外:
mood_color 此时尚未定义，因为 postMessage 发送异步消息。由于它是异步的，响应直到稍后才会发生，即在 console.log 运行之后。
当mood_color最终被设置时，它被设置为一组对象(在本例中只有一个)，而不是颜色，因为这是从工作人员传入的内容。具体来说，它设置为:
[ { weather: 'sunny', mood: 'happy', color: 'yellow' } ]
当您尝试将 CSS 变量设置为此时，数组将被强制转换为字符串“[object Object]”，并且 CSS 变量将设置为该字符串。这就是为什么文本最终会变成黑色，而不是您在 CSS 中设置的灰色或您尝试将其更改为的黄色。 mood_color[0].color 将获取实际的颜色值。
关于javascript - 是否可以从 html 工作文件更新变量值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54894717/