在Javascript中对div的链接进行样式设置

12 浏览
0 Comments

在Javascript中对div的链接进行样式设置

我想使用JavaScript更改元素链接的样式。CSS代码如下：\n

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

\n我知道可以更改元素本身的样式，如下所示：\n

elementObject.style.color = '#000';

\n我想要的伪代码如下：\n

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

\n我该如何实现这个目标？

0

3 答案

0 Comments

在Javascript中，无法仅通过选择器选择visited链接。可以查看这个链接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++){
    // 在这里检查并设置样式
}

0
0 Comments

问题：如何使用JavaScript样式化一个div中的链接？

原因：使用JavaScript循环遍历所有链接，并逐个设置样式。

解决方法1：

通过JavaScript循环遍历所有链接，并逐个设置样式。

解决方法2：

创建一个带有"class"属性为"wrapper"的包装div，然后使用JavaScript将其class名称替换为"wrapper2"。然后，CSS中类似".wrapper a"的规则将会生效。

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

这种方法不完全回答了问题，我刚刚更新了我的回答。

0
0 Comments

问题的出现原因是: :link和:visited不是真正的CSS元素，而是CSS规则的一部分，这意味着您需要编辑规则、更改规则或应用另一个类。

解决方法是使用JavaScript创建一个新的style元素，然后将CSS样式规则添加到该元素中，再将该元素添加到head标签中。代码如下：

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

这段代码首先创建了一个新的style元素，并将CSS样式规则赋值给变量css。然后根据浏览器支持情况，分别使用style.styleSheet.cssText和style.appendChild方法将CSS样式规则添加到style元素中。最后，通过document.getElementsByTagName('head')[0].appendChild(style)将style元素添加到head标签中。

这样就实现了通过JavaScript来为div元素的链接样式添加新的CSS规则的目的。

最后，感谢提问者的建议，我们也认为使用应用新的类来实现相同的效果是一个不错的方法。

0