JavaScriptを使用してリンクの色を変更します

Question

ウェブページを作成して、基本的に色を反転させる独自のライトスイッチを作成しました。黒が白に、逆に色が変化しますが、色を変更するリンクが得られません。私はアンカータグとa：visited、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 -classedの要素を取得するにはJSでdocument.getElementsByClassNameを使用し、各リンクにlinksクラスを追加します。 2つの関数（lightsOffと）のそれぞれでは、links要素を反復して、links.item([index])という構文を使用してアクセスし、links_lights_offクラスを使用してリンクカラーを変更するエフェクトを実現します。そのクラスとのリンクは白色でなければなりません。lightsOff関数内の各リンクにこのクラスを追加し、lightsOn関数の各リンクからこのクラスを削除します。

クラスはlinks_lights_offクラスと同じ機能、lights_off関数でクラスを追加し、lights_on関数でそれを除去、ならびにdocument.bodyのbackground-color/color効果のために使用されます。

改善がたくさんありましたが、すぐにあなたを混乱させるような感じがしました。間違っていたかもしれません。

ご不明な点がございましたら、お気軽にお問い合わせください。これがあなたが求める効果でない場合は、私に知らせてください。