Question

使用 javascript 更改 html 中文本的颜色

2017-03-01

3196

javascript jquery html

我正在使用单独的 .js 文件更改某些文本的颜色。我是 HTML 和 JavaScript 的新手，请详细说明。谢谢。

这是我目前得到的结果：

htmlfile.html

<html>
<body>
    <p id="demo"> Click the button to change the text in this paragraph. </p>
</body>
</html>

jsfile.js

var button = document.createElement("button")
    button.innerHTML = "Red or green"
    // Sets or returns the content of an element

    // 2. Append somewhere
    var body = document.getElementsByTagName("body")[0]
    body.appendChild(button)
    // Adds a new child node, to an element, as the last child node

    // 3. Add event handler
    button.addEventListener("click", function () {
        state = !state
        // Attaches an event handler to the specified element

        //var led = document.createElement('LED')
        if (state = 1) {
            document.getElementById("demo").style.color = "red"
        } else {
            document.getElementById("demo").style.color = "green"
        }
        //body.appendChild(led)
    })
}

Answer 1

status = 1;
function switchStyle() {
x = document.getElementById("text");
if(status==1) {
    x.style.color = 'blue';
    status = 2;
}
else if(status==2) {
    x.style.color = 'red';
    status = 1;
}
}

<p id="text">This text color will change.</p><br>
<button type="button" onclick="javascript:switchStyle();">Switch Style</button>

Answer 2

一些建议：

使用 document.body 而不是 getElementsByTagName('body')
在行尾使用分号（说明）
在 addEventListener 函数外创建 state 变量
如果在 if() 条件中比较值，请使用 == 或 === 而不是 =

var button = document.createElement('button');
button.innerHTML = 'Red or green';

document.body.appendChild(button);

var state = 0;

button.addEventListener('click', function (){
   var demo =  document.getElementById("demo");

   if (state === 1) {
     demo.style.color = 'red';
     state = 0;
     } else {
       demo.style.color = 'green';
       state = 1;
    }
});

<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
</body>
</html>