在html中使用javascript更改文本的顏色

我正在使用單獨的.js文件更改某些文本的顏色。我是HTML和JavaScript的新手，請詳細說明。謝謝。在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) 
    }) 
}

來源

2017-03-01 Jelo Rilo

的可能重複[使用JavaScript更改文本顏色？（http://stackoverflow.com/questions/17925577/change-text-color-with-javascript） – Santi

幾個建議的：

使用document.body，而不是在線路末端getElementsByTagName('body')
用分號（指令）
如果你如果（）條件比較值創建state變種外addEventListener功能
，使用==或===代替=

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>

來源

2017-03-01 23:56:54

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>

來源

2017-03-02 00:15:59

在html中使用javascript更改文本的顏色

回答

相關問題