我想知道如何使用javascript操作页面上的所有链接。我可以通过id document.getElementById(id)
获取元素,但是如何获取链接?而且我如何才能获得具有特定classname
的所有元素?我想改变链接和类元素的颜色。
我的意思是这些链接:
<a href="http://www.google.com">This is a link</a>
具有类的元素的示例:
<span class="link">This is an element with a class</span>
请不要jquery。我想要javascript。
答案 0 :(得分:17)
简单明了(纯粹的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;
}
}
}
如果它是您正在寻找的类名,并且您知道该标记,请使用此标记。
var elements = document.getElementsByTagName("span");
for(var j=0;j<elements.length;j++)
{
if(elements[j].className === "your class here")
{
//do something
}
}
您还可以查看getElementsByClassName和querySelectorAll。两者都支持大多数新浏览器。
答案 1 :(得分:6)
纯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';
}
}
对于现代浏览器:
var elements = document.querySelectorAll('a.red');
[].slice.call(elements).forEach(function(elem) {
elem.style.color = 'red';
});
答案 2 :(得分:1)
您可以使用document.getElementsByTagName("a")
。此函数返回页面中<a>
元素的数组。循环遍历此数组,并在每个元素中使用.style.color = "#000000"
。
答案 3 :(得分:1)
这是我更改所有超链接颜色(正常/悬停)的方式:
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;}
}
}
}
}
答案 4 :(得分:0)
更新:我仍然建议您使用jQuery,但是,如果您想学习如何在没有jQuery的情况下使用jQuery,我建议您前往此站点。这显示了当您将鼠标悬停在链接上时如何更改链接颜色,但您可以根据具体情况轻松推断:Javascript Change Link Text Color onmouseover
-
Ottomanlast对于检查jQuery以帮助您完成此任务有一个很好的观点(尽管可以在不使用库的情况下完成)。但是,就像你有一个他正在谈论的例子,这里是你如何使用jQuery更改链接颜色。
$('.linkClass').click(function(){
$(this).css('color', 'green');
});
此示例在单击时更改特定链接的颜色。
$('a').css('color', 'green');
此示例将所有链接更改为绿色。
$('.linkClass').click(function(){
$(this).removeClass('oldClass');
$(this).addClass('newClass');
});
这与第一个示例的作用相同,但这会删除并添加您已在其他地方定义的CSS类。 (我建议这种方法不仅仅是直接编辑CSS。)
无论如何,我想说的是,jQuery使得选择非常容易,然后对HTML文档中的对象进行更改。你可能想看看它。
答案 5 :(得分:0)
您还可以在范围中嵌入链接文本并更改颜色
.modal.fade.in{
overflow-y:hidden;
}