在Javascript中设置div的链接[重复]答案

【问题标题】：Styling a div's links in Javascript [duplicate]在Javascript中设置div的链接[重复]
【发布时间】：2013-05-15 08:44:23
【问题描述】：

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

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

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

elementObject.style.color = '#000';

我想要的伪代码是：

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

我该怎么做？

【问题讨论】：

也许新的HTML5 selectors API 可能适合您的用例。
看看 jQuery。

标签： javascript css dom

【解决方案1】：

您可以循环链接并一一设置。

<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 中的规则如.wrapper a 将被激活。

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

【讨论】：

这并不能真正回答问题
刚刚更新了我的答案。

【解决方案2】：

: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);

【讨论】：

有道理...我认为申请一个新课程实际上很适合我的需要...谢谢！
是的，这也是我会采取的方法 :) 我也想把它放在答案中......

【解决方案3】：

select visited links 是 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
}

【讨论】：

【解决方案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;');

【讨论】：