如何让 onclick 事件用于更改 CSS 属性？答案

【问题标题】：How can I get onclick event to work for changing CSS attributes?如何让 onclick 事件用于更改 CSS 属性？
【发布时间】：2020-10-04 19:50:59
【问题描述】：

我是一个尝试 Javascript 的初学者。我想通过 onclick 事件更改字体颜色和字体系列（以及背景图像的渐变，但我什至无法猜测如何访问它）。我制作了一个按钮，单击该按钮应运行 spookFunction 并将正文中的字体颜色更改为橙色，将字体系列更改为谷歌字体 Bangers。我试图为您制作一个小提琴以查看代码（这是我第一次使用 JSFiddle，所以我不确定它是如何工作的）： https://jsfiddle.net/Linnea_Borealis/u8n9ezhs/10/ 我剪辑了一些我发现的示例代码，只是为了看看它是否可以工作并与我自己的代码进行比较：

单击我以更改我的文本颜色。

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

那部分工作正常，但另一部分却不行。有什么不同？

我注意到在 VS Code 中“style”在“document.getElementById("welcome").style.color="red"" 中比在 "document.getElementsByTagName("body").style.color= 中具有另一种颜色“橙”;”和 "document.getElementsByTagName("body").style.fontFamily="Bangers", cursive;"我是否以错误的方式使用 getElementsByTagName？

另外，在 JS Fiddle 中，文本周围有一个白色矩形，当我在浏览器中打开 html 文件时看不到它...为什么？如果有人能以对初学者友好的方式解释这一点，我将不胜感激。

【问题讨论】：

标签： javascript html css

【解决方案1】：

白色矩形是你的身体。如果您添加您的 css 正文类 background-color:black; 您可以看到它。对于 getElementsByTagName，其他答案都是正确的。

试试这个：

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

function spookFunction() {
  document.getElementsByTagName("body")[0].style.color="orange";
  document.getElementsByTagName("body")[0].style.fontFamily="Bangers, cursive";
  document.getElementById("welcome").style.color="red"
 }

html {
  background-image: linear-gradient(#0099ff, white);
  min-height: 100%;
}
body {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  font-family: 'Lobster', cursive;
  color: white;
  background-color: black;
}

h1{ font-size: 50px; }
p {
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spook My Page</title>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Lobster&display=swap" 
        rel="stylesheet">
    </head>
    <body>
        <h1 id="welcome">Welcome Friend!</h1> 
        <p>To change the color scheme — Click the button below!</p>
        <p id="demo" onclick="myFunction()">Click me to change my text color.</p>

        <button type="button" onclick="spookFunction()">Click Me!
        </button>
    </body>
</html>

【讨论】：

【解决方案2】：

getElementsByTagName 返回数组而不是单个元素。因此，您将不得不访问像 getElementsByTagName("body")[0] 这样的元素。希望这会有所帮助。

【讨论】：

没错，如果有多个元素具有相同的类，它只会影响第一个。所以 JS 需要一行来循环遍历所有同一个类的元素才能全部生效。

【解决方案3】：

function spookFunction() {
        document.getElementsByTagName("BODY")[0].style.backgroundColor="orange";
       document.getElementsByTagName("BODY")[0].style.fontFamily="Bangers,cursive";
        
        document.getElementById("welcome").style.backgroundColor="red"}

这应该可以完成工作，你为 backgroundColor 使用了错误的变量名，它找不到正文，因为 document.getElementsByTagName("BODY") 返回一个标签数组

【讨论】：