Question

我正在使用单独的.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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一些建议：

使用document.body代替getElementsByTagName('body')
在行的末尾使用分号（说明）
在state功能

addEventListener

如果您比较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>

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

2 个答案: