Question

所以我创建了一个网页，我已经制作了自己的灯光开关，它基本上颠倒了颜色，黑色变为白色，反之亦然，但我似乎无法获得改变颜色的链接。我想要我的锚标签以及：访问，a：链接到所有更改为不同的颜色，但无法使其工作。

HTML：

<nav>
    <h1>My Portfolio</h1>
    <ol>
        <li><a title="Link to My Cover Letter & CV" href="index.html">My Cover Letter & CV</a> | </li>
        <li><a title="Link to My Projects" href="">My Projects</a> | </li>
        <li><a title="Link to Temp" href="">Temp</a> | </li>
        <li><a title="Link to Temp" href="personalDev.html">Temp</a></li>
    </ol>
</nav> <!-- Closes Nav -->

CSS：

/*Links*/
a, a:link, a:visited {
    color: black;
    text-decoration: none;
    transition: 1s;
}

/*Link hovering*/
nav a:hover {
    text-decoration: none;
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px;
}

使用Javascript：

    document.addEventListener ("DOMContentLoaded", handleDocumentLoad);
function handleDocumentLoad() {

    //Variable
    var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff
    var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn
    var border = document.getElementById("mainContent"); //Targets the mainContent
    offSwitch.innerHTML = "Turn On Night Mode";
    onSwitch.innerHTML = "Turn Off Night Mode";
    onSwitch.style.display = "none";

    //Event Listener
    offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed
    onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed

    //Function
    function lightsOff() { /*This changes the background colour to black and makes text white*/
        document.body.style.backgroundColor = "#000000";
        document.body.style.color = "#FFFFFF";
        border.style.borderColor = "#FFFFFF";
        onSwitch.innerHTML = "Turn Off Night Mode";
        onSwitch.style.display = "inline";
        offSwitch.style.display = "none";
    }

    function lightsOn() { /*This changes the background colour to a white and makes text black*/
        document.body.style.backgroundColor = "#FFFFFF";
        document.body.style.color = "#000000";
        border.style.borderColor = "#000000";
        offSwitch.innerHTML = "Turn On Night Mode";
        onSwitch.style.display = "none";
        offSwitch.style.display = "inline";
    }
}

此外，我想知道是否有办法保存页面状态，例如用户按下电灯开关，刷新页面，它仍然是相同的。

Answer 1

你可以使用基本的DOM样式对象吗？

<a id="link" href="#">this is a link</a>
<script>
    document.getElementById("link").style.color = "green";
</script>

或者你可以使用jQuery吗？

<a id="link" href="#">this is a link</a>
<script>
    $( "a" ).css( {"color":"green"} );
</script>

Answer 2

document.addEventListener ("DOMContentLoaded", handleDocumentLoad);

function handleDocumentLoad() {

//Variable
var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff
var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn
var border = document.getElementById("mainContent"); //Targets the mainContent
offSwitch.innerHTML = "Turn On Night Mode";
onSwitch.innerHTML = "Turn Off Night Mode";
onSwitch.style.display = "none";

//Event Listener
offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed
onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed


var links = document.getElementsByClassName("links");


//Function
function lightsOff() { /*This changes the background colour to black and makes text white*/
document.body.className += " body_lights_off";
border.style.borderColor = "#FFFFFF";
onSwitch.innerHTML = "Turn Off Night Mode";
onSwitch.style.display = "inline";
offSwitch.style.display = "none";
var i;
for(i = 0; i < links.length; i++) {
links.item(i).className += " links_lights_off";
}
}

function lightsOn() { /*This changes the background colour to a white and makes text black*/
document.body.className = document.body.className.replace(" body_lights_off", "");
border.style.borderColor = "#000000";
offSwitch.innerHTML = "Turn On Night Mode";
onSwitch.style.display = "none";
offSwitch.style.display = "inline";
var i;
for(i = 0; i < links.length; i++) {
links.item(i).className = links.item(i).className.replace(" links_lights_off", "");
}
}


}

.body_lights_off {
background-color: #000000;
color: #ffffff;
}

/*Links*/
a, a:link, a:visited {
    color: black;
    text-decoration: none;
    transition: 1s;
}

/*Link hovering*/
nav a:hover {
    text-decoration: none;
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px;
}

.links_lights_off:link, .links_lights_off:visited {
color: white;
}

<nav>
    <h1>My Portfolio</h1>
    <ol>
        <li><a class="links" title="Link to My Cover Letter & CV" href="index.html">My Cover Letter & CV</a> | </li>
        <li><a class="links" title="Link to My Projects" href="">My Projects</a> | </li>
        <li><a class="links" title="Link to Temp" href="">Temp</a> | </li>
        <li><a class="links" title="Link to Temp" href="personalDev.html">Temp</a></li>
    </ol>
</nav> <!-- Closes Nav -->

<button id="lightSwitchOn"></button>
<button id="lightSwitchOff"></button>

<div id="mainContent"></div>

您为每个链接添加了一个links类，然后在JS中使用document.getElementsByClassName来获取所有这些links - 类别的元素。在2个函数（lightsOff和lightsOn）中的每个函数中，您遍历links元素，使用语法links.item([index])访问它们，然后实现链接颜色通过links_lights_off类更改效果，在CSS中，指定该类的所有链接应该具有白色，您将此类添加到lightsOff函数中的每个链接，并且您从lightsOn函数中的每个链接中删除它。

一个类用于document.body的{{1}} / background-color效果，功能与color类相同，在links_lights_off函数并在lights_off函数中将其删除。

我可以做出很多改进，但我觉得这样的事情会让你感到困惑，也许我错了。

如果您有任何疑问，请随时提出。如果这不是您所寻求的效果，请通知我。

使用Javascript更改链接颜色

2 个答案: