是否可以从 html 工作文件更新变量值？

Question

我正在学习如何为 html 页面使用工作文件。我正在尝试根据 worker.js.

的返回值更新 css 变量

如果我在 worker.addEventListener 内更新 css 变量，颜色会变为黄色。

如果我尝试更新 eventlistener 之外的 css 变量，它不会执行任何操作，因为 mood_color 未定义。

是否可以为 html 工作人员的变量赋值？

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 工人）

    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);

Answer 1

您的代码存在一些问题。除了语法错误：

mood_color 此时未定义，因为 postMessage 发送异步消息。由于它是异步的，响应要到稍后才会发生，在 console.log 运行之后。

当最终设置 mood_color 时，它被设置为一组对象（在本例中只有一个），而不是颜色，因为这是从 worker 传入的。具体来说，它设置为：

[ { weather: 'sunny', mood: 'happy', color: 'yellow' } ]

当您尝试将 CSS 变量设置为此时，数组被强制转换为字符串 "[object Object]" 并且 CSS 变量被设置为该字符串。这就是为什么文本最终变成黑色而不是您在 CSS 中设置的灰色或您尝试将其更改为黄色的原因。 mood_color[0].color 会得到实际的颜色值。

是否可以从 html 工作文件更新变量值？

is it possible to update variable value from html worker file?

javascript

jquery

html

worker

css-variables

HTML

jquery

mood.js（html 工人）