我无法在javascript中将颜色更改为红色

Question

我正在尝试使用JavaScipt（onclick）更改p标签的颜色，在w3schools中它显示：

function myFunction() {
    document.getElementById("demo").style.color = "red";
}

但是我不喜欢document.getElementById，所以我想知道如何替换它。

我正在尝试

function change() {
    document.write(color().style.color = red);
}

但是它不起作用。 （请记住，我是javascript新手）谢谢。 ：）

Answer 1

您可以使用this关键字。

this.style.color = 'red';

要更改元素的样式，您需要对元素的引用，这正是document.getElementById所提供的。还有其他方法，但是由于您将其用作onclick侦听器，因此可以利用this关键字包含对目标元素的引用这一事实。

示例代码段：

<p onclick="this.style.color='red'">Click this to change color to red</p>

Answer 2

@Autowired Map<String, Mechanic> mechanics; Mechanic mechanic = mechanics.get(beanName); 接受一个值输出到document.write

document

Answer 3

您可以使用与document.querySelector非常相似的document.getElementById，并且在您的情况下，它也可以这样做。请注意，document.write这次不是正确的方法，因为i t直接将文本写入HTML文档，并且您不能使用它来更改元素的颜色。

  

document.querySelector（element）获取具有给定id的第一个元素，或者   括号中的类

function myFunction() { document.querySelector("#demo").style.color = "red"; }

#demo{
  width: 200px;
  height: 100px;
  background-color: blue;
}

<div id="demo">Watch me change</div>
<button onclick="myFunction()">Change color</button>

参考

W3Schools: document.querySelector
Read about what document.write() does

Answer 4

好吧，如果您不喜欢JavaScript（document.getElementById）{但是为什么？}，则可以使用以下CSS：

  

：active选择器用于选择和设置活动链接的样式。一种   链接在您单击时变为活动状态。 ：active选择器可以是   在所有元素上使用，不仅用于链接。

p {color: blue;cursor: pointer;}

p:active {color: red}

<p> I change color when clicked </p>