Javascript 如何使用javascript更改链接的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5131379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the color of the links with javascript?
提问by Maxxon
I want to know how can I manipulate all the links on a page with javascript. I can get elements by id's with document.getElementById(id), but how can I get the links? And also how can I get all elements with a certain classname? I want to change the color of the link and class elements.
我想知道如何使用 javascript 操作页面上的所有链接。我可以通过 id 获取元素document.getElementById(id)，但是如何获取链接？还有我怎样才能得到所有元素classname？我想更改链接和类元素的颜色。
I mean these links:
我的意思是这些链接：
<a href="http://www.google.com">This is a link</a>
And an example for an element with a class:
以及带有类的元素的示例：
<span class="link">This is an element with a class</span>
Please no jquery.I want javascript.
请不要jquery。我想要 JavaScript。
回答by
Simple and straightforward (in pure JS too!)
简单明了（在纯 JS 中也是如此！）
colorLinks("#00FF00");
function colorLinks(hex)
{
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].href)
{
links[i].style.color = hex;
}
}
}
If it's a class name you're looking for and you know the tag, just use this.
如果它是您要查找的类名并且您知道标签，请使用它。
var elements = document.getElementsByTagName("span");
for(var j=0;j<elements.length;j++)
{
if(elements[j].className === "your class here")
{
//do something
}
}
You can also look at getElementsByClassNameand querySelectorAll. Both have support in most new browsers.
您还可以查看getElementsByClassName和querySelectorAll。两者都支持大多数新浏览器。
回答by Blender
The pure-JavaScript version isn't all that complicated:
纯 JavaScript 版本并没有那么复杂：
var elements = document.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++) {
if (elements.className.split(/\s+/).indexOf('red') !== -1) {
elements[i].style.color = 'red';
}
}
And for modern browsers:
对于现代浏览器：
var elements = document.querySelectorAll('a.red');
[].slice.call(elements).forEach(function(elem) {
elem.style.color = 'red';
});
回答by Supertecnoboff
This is how I change all hyperlink colors (normal/hover):
这就是我如何更改所有超链接颜色（正常/悬停）：
function changeTextHyperlinkColours(inputColorNormal, inputColorHover) {
var sheets = document.styleSheets;
var slen = sheets.length;
for(var i=0; i<slen; i++) {
var rules = document.styleSheets[i].cssRules;
var rlen = rules.length;
for(var j=0; j<rlen; j++) {
if (rules[j].selectorText == 'a') {
rules[j].style['color'] = inputColorNormal;
}
if (rules[j].selectorText == 'a:hover') {
rules[j].style['color'] = inputColorHover;}
}
}
}
}
回答by JasCav
Update:I still recommend using jQuery, but, if you want to learn how to do it without, I would recommend heading over to this site. This shows how to change link colors when you mouse over the link, but you can easily extrapolate for your specific situation: Javascript Change Link Text Color onmouseover
更新：我仍然建议使用 jQuery，但是，如果您想学习如何不用 jQuery，我建议您访问此站点。这显示了当您将鼠标悬停在链接上时如何更改链接颜色，但您可以轻松地针对您的特定情况进行推断：Javascript Change Link Text Color onmouseover
--
——
Ottomanlast has a good point about checking out jQueryto help you out with this task (although it can be done without the use of a library). However, just so you have an example of what he is talking about, here is how you could change link colors using jQuery.
Ottomanlast 有一个很好的观点，即检查jQuery以帮助您完成这项任务（尽管它可以在不使用库的情况下完成）。但是，为了让您了解他正在谈论的内容，这里是您如何使用 jQuery 更改链接颜色的示例。
$('.linkClass').click(function(){
$(this).css('color', 'green');
});
This example changes the color of a specific link when it is clicked.
此示例在单击时更改特定链接的颜色。
$('a').css('color', 'green');
This example will change all the links to a green color.
此示例将所有链接更改为绿色。
$('.linkClass').click(function(){
$(this).removeClass('oldClass');
$(this).addClass('newClass');
});
This does the same thing as the first example, but this removes and adds CSS classes that you already have defined elsewhere. (I would recommend this method over just editing the CSS directly.)
这与第一个示例执行相同的操作，但这会删除并添加您已在别处定义的 CSS 类。（我会推荐这种方法，而不是直接编辑 CSS。）
Anyway, the point I'm trying to make is that jQuery makes it extremely easy to select and then make changes to the objects within your HTML document. You may want to take a look into it.
无论如何，我想说明的一点是，jQuery 使选择和更改 HTML 文档中的对象变得非常容易。你可能想看看它。
回答by eolith
You can use document.getElementsByTagName("a"). This function returns an array of the <a>elements in the page. Loop over this array, and use .style.color = "#000000"in each element.
您可以使用document.getElementsByTagName("a"). 此函数返回<a>页面中元素的数组。循环遍历此数组，并.style.color = "#000000"在每个元素中使用。
回答by Ishan Liyanage
Also you can embed the link text in the span and change the color
您也可以在跨度中嵌入链接文本并更改颜色
<a href='www.mydomain.com'><span onclick='this.style.color="red"'>Visit Us</span></a>
