Question

我想使用JavaScript更改元素链接的样式。 CSS看起来像：

#element a:link {
    color: #000;
}

我知道您可以更改元素本身的样式，如：

elementObject.style.color = '#000';

我想要的伪代码是：

                 |
                 V
elementObject.[A:LINK].style.color = "#ff0000";

我该怎么做？

Answer 1

：link：visited不是真正的CSS元素，而是CSS规则的一部分，这意味着您需要编辑规则，更改规则或应用另一个类......

var css='#element a:link { color: #ff0000 }';
style=document.createElement('style');
if (style.styleSheet)
    style.styleSheet.cssText=css;
else 
    style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);

Answer 2

您可以循环浏览链接并逐个设置。

<script type='text/javascript'>
function new_window()
{
    var anchors = document.getElementsByTagName('a');
    for(var i = 0; i < anchors.length; i++)
    {
        anchors[i].style.color = '#000';
    }
}
window.onload = new_window;
</script>

使用“wrapper”类名创建包装器div的另一种方法。然后用JavaScript将其类名替换为“wrapper2”。之后，像.wrapper a这样的CSS中的规则将被激活。

.wrapper a
{
    //normal code
}
.wrapper2 a
{
    color: #000;
}

Answer 3

选择访问过的链接是javascript不仅仅是一个选择器。看看Detect Visited Link In Chrome

和http://archive.plugins.jquery.com/project/Visited

所以，如果你想使用javascript循环通过正文中的所有链接设置访问/未访问链接的样式。检查他们是否被访问，然后应用风格。

var as = document.getElementsByTagName('a');
for(var i=0;i<as.length;i++){
//check and set the style here
}

Answer 4

function addCss(sel, css){
    S= document.styleSheets[document.styleSheets.length-1];
    var r= (S.cssRules!= undefined)? S.cssRules: S.rules;
    if(S.insertRule) S.insertRule(sel+'{'+css+'}',r.length);
    else if(S.addRule)S.addRule(sel,css,r.length);
}

 addCss('button:hover','background-color:blue;');

在Javascript中设置div的链接样式

4 个答案: