Question

在我的HTML文档中，我有一个ID为“text”的<div>，我试图根据服务器返回的值来着色。

我有以下JS：

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("status.php");
    source.onmessage = function(event) {
        document.getElementById("text").innerHTML = event.data;
    };
} else {
    document.getElementById("text").innerHTML = "Sorry, your browser does not support sse";
}

所以一切都很好，但我的问题是：如何根据返回的<div>值更改event.data文字的颜色？

例如，如果event.data返回online，那么我想将文本的颜色更改为绿色，如果它返回offline，那么我想将其更改为红色。< / p>

Answer 1

Say event.data是一个像这样的json对象： { blue: '#00F' }然后，正如您将<div>的innerHTML设置为返回值一样，我们也可以更新其'style属性：

在阅读你的回复后，我相信我明白你要做的事情......为了开始，让事情变得简单，我们将制作一个标签到颜色对的对象（在线：绿色，离线：红色，暂停：黄色等......）：

var pairs = {
    offline: '#F00',
    online: '#0F0',
    pause: '#FF0'
}

然后我们将从服务器＆amp;中返回值（在线，离线，暂停等...）。从我们的对象中获取相应的颜色。然后将文本的颜色设置为该颜色。

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("status.php");
    source.onmessage = function(event) {
        var state = event.data.toLowerCase(),  // ensure offline & not OfFliNe
            color = pairs[state]; // get the corresponding color from pairs object, offline: red

        document.getElementById("text").innerHTML = event.data;
        document.getElementById("text").style.color = color;
    };
} else {
    document.getElementById("text").innerHTML = "Sorry, your browser does not support sse";
}

所有在一起：

var pairs = {
    offline: '#F00',
    online: '#0F0',
    pause: '#FF0'
}

if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("status.php");
    source.onmessage = function(event) {
        var state = event.data.toLowerCase(),
            color = pairs[state];

        document.getElementById("text").innerHTML = event.data;
        document.getElementById("text").style.color = color;
    };
} else {
    document.getElementById("text").innerHTML = "Sorry, your browser does not support sse";
}

根据API返回的字符串更改文本颜色

1 个答案: