javascript - 在 Javascript 中设置 div 的链接样式

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>

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

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

Answer 3

仅通过选择器无法选择访问过的链接。看看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;');