Question

我的文字如下：

<p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
<button>COLORCHANGER<button>

我想在点击按钮时更改文字颜色。

Answer 1

首先，您需要使用document.getElementsByTagName("button")[0];找到要更改颜色的元素，并将其存储在变量中。

接下来，使用button元素上的事件侦听器来侦听单击。

执行点击后，p元素会将其颜色更改为蓝色。

＆＃13;

var colorChanger = document.getElementsByTagName("button")[0];
colorChanger.addEventListener("click",function() {
  document.querySelector('p').style.color = "blue";  
});

＆＃13;

<p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
 <button>COLORCHANGER<button>

＆＃13;

Answer 2

＆＃13;

document.getElementsByTagName("button")[0].addEventListener("click",function() {
  document.querySelector('p').style.color = "red";  
});

＆＃13;

 <p id = 'textToChange'><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
 <button>COLORCHANGER<button>

＆＃13;

Answer 3

使用click将addEventListener('click')事件附加到按钮，然后使用.style.color = 'color'更改文字颜色，请查看以下示例。

注意：如果您为元素添加标识符会更好。

希望这有帮助。

＆＃13;

document.querySelector('button').addEventListener('click', function(){
    document.querySelector('p').style.color='green';
})

＆＃13;

<p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
<button>COLORCHANGER</button>

＆＃13;

Answer 4

＆＃13;

function changeColor(){
var element = document.getElementById("questionContainer");
element.className = "myClass";
}

＆＃13;

.myClass{
 color:red; 
 }

＆＃13;

<div id="questionContainer"> 
<p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
  </div>
 <button onclick="changeColor()">COLORCHANGER<button>

＆＃13;

Answer 5

为元素指定id / class以获得更好的结果。

       $("input[type=button]").click(function () {
            $("p").css("color", "red");
        });

如何通过单击按钮更改文本颜色？

5 个答案: