Question

我目前正在尝试使用JavaScript，但我无法更改目标网页上链接的样式。我所拥有的是页面右上角的四个框，点击后会更改着陆页的主题。单击框时，我能够获取背景和文本，但超链接保持不变。我已经阅读了其他一些提出类似问题的帖子，但我无法根据我的情况调整代码。

我尝试过使用getElementById和getElementByclassName，但都没有产生我想要的结果。 getElementById能够更改其中一个链接，但其余链接保持不变。我猜它只适用于一个链接，因为每个页面只能使用一次id？

当前的JavaScript代码是作为四个单独的函数编写的，但我想也许使用一个case语句会更好？

我留下了一个指向jsfiddle的链接，但由于某种原因，onclick函数在jsfiddle中不起作用。任何帮助将不胜感激。

谢谢！

http://jsfiddle.net/F4vte/

HTML

<body>
    <div id="container">
        <form>
            <input type="button" id="color-box1"
                onclick="colorText1();">

            <input type="button" id="color-box2"
                onclick="colorText2();">

            <input type="button" id="color-box3"
                onclick="colorText3();">

            <input type="button" id="color-box4"
                onclick="colorText4();">
        </form>

        <div id="centerText">
            <h1 id="name">Donald Price</h1>
            <div id="underline"></div>
            <div id="nav">
                <a href="blog.html">Blog</a>
                <a href="projects.html">Projects</a>
                <a href="contact.html">Contact</a>
                <a href="resume.html">Resume</a></p>
            </div>
        </div>
    </div>
</body>

的JavaScript

function colorText1(){
    document.getElementById("name").style.color="#A32DCA";
    document.getElementById("underline").style.color="#A32DCA";
    document.getElementById("nav").style.color="#A32DCA";
    document.bgColor = '#96CA2D';
}

function colorText2(){
    document.getElementById("name").style.color="#8FB299";
    document.getElementById("underline").style.color="#8FB299";
    document.bgColor = '#FFFFFF';
}

function colorText3(){
    document.getElementById("name").style.color="#484F5B";
    document.getElementById("underline").style.color="#484F5B";
    document.bgColor = '#4BB5C1';
}

function colorText4(){
    document.getElementById("name").style.color="#FFFFFF";
    document.getElementById("underline").style.color="#FFFFFF";
    document.bgColor = '#00191C';
}

CSS

body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;    
}

#underline {
border-bottom:3px solid;
}

#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}

/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}

#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
    margin-top: 4px;
}

#color-box1 {
background-color:#96CA2D;
right:0;
}

#color-box2 {
right:50px;
background-color:#FFFFFF;
}

#color-box3 {
right:100px;
background-color:#4BB5C1;
}

#color-box4 {
right:150px;
background-color:#00191C;
}

#centerText {
width:50em;
text-align:center;
}

#nav {
padding:20px;
}

#nav a {
padding-left:2px;
font-size:20px;
text-align:center;

}

a:link {
color:#000;
text-decoration:none;
}

a:visited {
text-decoration:none;
color:#999;
}

a:hover {
text-decoration:none;
color:red;
}

a:active {
text-decoration:none;
}

Answer 1

除了@ j08691关于需要在标题中运行现有脚本的内容之外，

只需将color:inherit;添加到您的css中的#nav a选择器。

#nav a {
    padding-left:2px;
    font-size:20px;
    text-align:center;
    color:inherit; 
}

这样，当您更改#nav的颜色时，您的链接会继承该颜色（a）。

的 Live Demo

Answer 2

您不能只设置div的颜色来更改链接的颜色。您需要获取a元素并更改其样式。可能有更好的方法来做到这一点，但只是为了说明，你可以遍历div的子节点：

function colorText1() {
    document.getElementById("name").style.color = "#A32DCA";
    document.getElementById("underline").style.color = "#A32DCA";
    var children = document.getElementById("nav").childNodes;
    for (var i=0; i < children.length; i++) {
        if (children[i].tagName == 'A') {
        children[i].style.color = "#A32DCA";
        }
    }
    document.bgColor = '#96CA2D';
}

在updated jsFiddle上查看它。

更改链接样式onclick

2 个答案: