按下按钮时更改文本颜色 - 使用 HTML 和 Javascript答案

【问题标题】：Changing text color when pushing button - using HTML and Javascript按下按钮时更改文本颜色 - 使用 HTML 和 Javascript
【发布时间】：2019-03-01 06:43:43
【问题描述】：

我今天刚开始学习 javascript，我正在尝试使用惊喜按钮将文本“日期”颜色从白色更改为粉红色，但似乎没有任何效果。所有其他按钮工作正常。（我可以使用 CSS 将文本颜色设置为白色，不知道是否妨碍了，但粉红色仍然没有发生任何事情）。

document.getElementById("button1").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "400px";
    document.getElementById("box").style.width = "400px";
  }
);

document.getElementById("button2").addEventListener("click",
  function() {
    document.getElementById("box").style.backgroundColor = "blue";
  }
);


document.getElementById("button3").addEventListener("click",
  function() {
    document.getElementById("box").style.opacity = ".5";
  }
);


document.getElementById("button4").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "150px";
    document.getElementById("box").style.width = "150px";
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.opacity = "100";
  }
);

document.getElementById("button5").addEventListener("click",
  function() {
    document.getElementById("Date").style.fontcolor = "pink";
  }
);

<!DOCTYPE html>
<html>

<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<head>
  <title>Jiggle Into JavaScript</title>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="button1">Grow</button>
  <button id="button2">Blue</button>
  <button id="button3">Fade</button>
  <button id="button4">Reset</button>
  <button id="button5">Surprise</button>

  <br>

  <p class="Date">Date</p>

</body>

</html>

【问题讨论】：

你需要使用color，而不是fontcolor，考虑到JavaScript通常的驼峰式大小写规则，fontcolor本身就是fontColor。祝你学习 JavaScript 好运！

标签： javascript html textcolor

【解决方案1】：

更改字体颜色的属性是style.color 而不是style.fontcolor。您通过使用document.getElementById('Date') 获取日期，而在p 标签中class 是日期而不是Id

document.getElementById("button1").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "400px";
    document.getElementById("box").style.width = "400px";
  }
);

document.getElementById("button2").addEventListener("click",
  function() {
    document.getElementById("box").style.backgroundColor = "blue";
  }
);


document.getElementById("button3").addEventListener("click",
  function() {
    document.getElementById("box").style.opacity = ".5";
  }
);


document.getElementById("button4").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "150px";
    document.getElementById("box").style.width = "150px";
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.opacity = "100";
  }
);

document.getElementById("button5").addEventListener("click",
  function() {
    document.getElementById("Date").style.color = "pink";
  }
);

<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<head>
  <title>Jiggle Into JavaScript</title>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="button1">Grow</button>
  <button id="button2">Blue</button>
  <button id="button3">Fade</button>
  <button id="button4">Reset</button>
  <button id="button5">Surprise</button>

  <br>

  <p id="Date">Date</p>

</body>

</html>

【讨论】：

谢谢！这使它变成粉红色！那么有没有办法让文本开始为白色并通过按钮变为粉红色？

【解决方案2】：

使用 style.color 代替 style.fontColor。

document.getElementById('Date').style.color = 'pink'

【讨论】：