如何让 onclick 事件用于更改 CSS 属性？
我是一个尝试 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="orange" 中有另一种颜色;" 和 "document.getElementsByTagName("body").style.fontFamily="Bangers", 草书;" 我以错误的方式使用 getElementsByTagName 吗？
此外，在 JS Fiddle 中，文本周围有一个白色矩形，当我在浏览器中打开 html 文件时，我看不到它……为什么？如果有人能以一种简单的初学者友好的方式解释这一点，我将不胜感激。
哆啦的时光机3回答
-
qq_花开花谢_0
白色矩形是您的身体。如果你添加你的 css body 类，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> <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> -
慕妹3146593
getElementsByTagName 返回数组而不是单个元素。因此，您将必须访问像这样的元素 getElementsByTagName("body")[0]。希望这会有所帮助。 -
慕斯王
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") 返回了一个标签数组
随时随地看视频慕课网APP
相关分类
JavaScript