如何让 onclick 事件用于更改 CSS 属性？
[英]How can I get onclick event to work for changing CSS attributes?
问题描述
I am a beginner trying Javascript.
我是尝试 Javascript 的初学者。 I would like to change the font color and font family with an onclick event (and also the gradient of the background image but I can't even guess how to access it).我想使用 onclick 事件更改字体颜色和字体系列（以及背景图像的渐变，但我什至无法猜测如何访问它）。 I have made a button which when clicked should run spookFunction and change the font color in body to orange and the font family to google font Bangers.我制作了一个按钮，单击该按钮时应运行 spookFunction 并将正文中的字体颜色更改为橙色，将字体系列更改为谷歌字体 Bangers。 I have tried to make a fiddle for you to see the code (this is my first time using JSFiddle so I'm not sure how it works): https://jsfiddle.net/Linnea_Borealis/u8n9ezhs/10/ I clipped in a some example code I found just to see if it would work and compare to my own code:我试图为你制作一个小提琴来查看代码（这是我第一次使用 JSFiddle，所以我不确定它是如何工作的）： https ://jsfiddle.net/Linnea_Borealis/u8n9ezhs/10/ 我剪了一个我发现的一些示例代码只是为了看看它是否可以工作并与我自己的代码进行比较：
单击我以更改我的文本颜色。
<script> function myFunction() { document.getElementById("demo").style.color = "red"; } </script> That part works fine, but the other part doesn't.那部分工作正常，但另一部分没有。 What is the different?有什么不同？
I notice in VS Code that "style" has another color in "document.getElementById("welcome").style.color="red"" than in "document.getElementsByTagName("body").style.color="orange";"我注意到在 VS Code 中，“样式”在“document.getElementById("welcome").style.color="red"" 中有另一种颜色，而不是在 "document.getElementsByTagName("body").style.color="orange" ;" and "document.getElementsByTagName("body").style.fontFamily="Bangers", cursive;"和 "document.getElementsByTagName("body").style.fontFamily="Bangers"，草书；" Am I using getElementsByTagName in the wrong way?我是否以错误的方式使用 getElementsByTagName？
Also, in JS Fiddle there is a white rectangle around the text, which I do not see when I open up the html-file in my browser... Why?此外，在 JS Fiddle 中，文本周围有一个白色矩形，当我在浏览器中打开 html 文件时看不到它......为什么？ I'm very grateful if anyone can explain this in an easy beginner-friendly way.如果有人能以对初学者友好的简单方式解释这一点，我将不胜感激。
3 个解决方案
解决方案1
1 2020-10-04 20:09:04
The white rectangle is your body.白色矩形是你的身体。 If you add your css body class background-color:black;如果你添加你的 css body 类background-color:black; you can see it.你可以看到。 And other answers are true for about the getElementsByTagName.其他关于 getElementsByTagName 的答案也是正确的。
Try this:尝试这个：
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
0 已采纳 2020-10-04 19:56:29
getElementsByTagName returns array instead of a single element. getElementsByTagName 返回数组而不是单个元素。 So you will have to access an element like this getElementsByTagName("body")[0].因此，您必须访问像 getElementsByTagName("body")[0] 这样的元素。 Hope this would help.希望这会有所帮助。
解决方案3
0 2020-10-04 19:59:42
function spookFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor="orange";
document.getElementsByTagName("BODY")[0].style.fontFamily="Bangers,cursive";
document.getElementById("welcome").style.backgroundColor="red"}
This should do the job, you used the wrong variable name for backgroundColor and it couldnt find the body because document.getElementsByTagName("BODY") returns an array of tags这应该可以完成这项工作，您为 backgroundColor 使用了错误的变量名称并且它无法找到正文，因为 document.getElementsByTagName("BODY") 返回一个标签数组
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.