Javascript：<a>单击按钮时如何更改标签的颜色</a>
[英]Javascript: how to change <a> tag's color when button is clicked
问题描述
When I run this code and press black button, every text changes their color to white, except <a> tag.
当我运行此代码并按下黑色按钮时，除了<a>标记之外，每个文本的颜色都会变为白色。
I already selected entire body tag with document.querySelector('body') , but the link appears to be blue .我已经用document.querySelector('body')选择了整个 body 标签，但链接似乎是blue 。
How can I select <a> tag independently and change its color to white ?我怎样才能 select <a>标签独立并将其颜色更改为白色？
Also, why <a> tag does not get effected by javascript code?另外，为什么<a>标签不受javascript代码的影响？
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'."> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="https://google.com">link</a> </body> </html>
5 个解决方案
解决方案1
2 已采纳 2020-04-30 12:59:43
You can add style code.您可以添加样式代码。
<style>
a{
color: inherit;
}
</style>
It gets the same color as the color in its top node (body).它的颜色与其顶部节点（主体）中的颜色相同。
Good Luck祝你好运
解决方案2
1 2020-04-30 12:54:25
document.getElementsByTagName('a')
And then you'd have to loop through them all and set their style.然后你必须遍历它们并设置它们的风格。
解决方案3
0 2020-04-30 12:55:40
If not specific styles are applied to an <a> tag, it will have this blue color by deafult given by the browser.如果没有将特定的 styles 应用于<a>标签，则浏览器默认给出此蓝色。
The first thing you can do is give the tag an id <a id="link" href="https://google.com">link</a> , and change its color property through javascript with document.getElementById('link').style.color = 'white' .您可以做的第一件事是给标签一个 id <a id="link" href="https://google.com">link</a> ，并通过 javascript 使用document.getElementById('link').style.color = 'white' 。 That way you'll only change the tags with that specific id.这样，您只会更改具有该特定 ID 的标签。
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'. document.getElementById('link');style.color = 'white'. "> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a id="link" href="https://google.com">link</a> </body> </html>
If you want to change all <a> tags in your html, you can add <style> in your <head> to make all <a> tags inherit css properties from the parent.如果要更改 html 中的所有<a>标签，可以在<head>中添加<style>以使所有<a>标签从父标签继承 css 属性。 So that it inherits, you'll have to give the parent () a color value.为了让它继承，你必须给 parent () 一个颜色值。
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <style> body { color; black: } a { color; inherit. } </style> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'. "> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a id="link" href="https://google.com">link</a> </body> </html>
解决方案4
0 2020-04-30 12:56:31
That happens because of how inheritance works in CSS.这是因为 inheritance 在 CSS 中的工作方式。 The browser styles the <a> tag as blue, and because of that, it doesn't inherit color from its ancestors.浏览器 styles 的<a>标签为蓝色，因此，它不会从其祖先那里继承color 。
I would recommend to set a class in your <body> element, and then use CSS to style it differently with/without the class, like this:我建议在您的<body>元素中设置 class ，然后使用 CSS 在有/没有 class 的情况下对其进行不同的样式设置，如下所示：
body.dark { background-color: black; } body.dark, body.dark a { color: white; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick="document.body.classList.add('dark')"> <input type="button" value="day" onclick="document.body,classList,remove('dark')"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="https://google.com">link</a> </body> </html>
解决方案5
0 2020-05-01 15:31:20
Try the following code:试试下面的代码：
a:visited {
color:orange
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.