2017-03-13 1 views
0

für folgende Verwendungszwecke Tasten zwischen Sheets zu tauschen:Wie ändere ich das Stylesheet mithilfe einer Dropdown-Box?

<!DOCTYPE html> 
<html> 
<head> 
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> 
<script> 
function swapStyleSheet(sheet){ 
    document.getElementById('pagestyle').setAttribute('href', sheet); 
} 
</script> 
</head> 
<body> 
<h2>Javascript Change StyleSheet Without Page Reload</h2> 
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button> 
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button> 
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button> 
</body> 
</html> 

würde Ich mag die gleiche Funktion verwenden, sondern stattdessen Tasten verwenden, können, indem Sie Sheets aus einer Dropdown-Box tauschen. Ich habe ein Set so zusammen, Links mit:

<div class="dropdown-content"> 
        <a href="swapStyleSheet('default.css')">Default</a> 
        <a href="swapStyleSheet('dark.css')">Dark</a> 
       </div> 

Wenn im Browser geladen wird, nimmt mich diese Links klicken auf „Seite nicht gefunden“. Ich nehme an, ich habe die Links im falschen Format geschrieben, was kann ich tun, um sie zu beheben? Vielen Dank!

Wenn irgendetwas in dieser Frage unklar ist, lass es mich wissen, bevor Sie abstimmen. Ich bin neu in SO und ich will es richtig machen! Vielen Dank!

Antwort

0

können Sie onclick Ereignis verwenden, wie folgend

<div class="dropdown-content"> 
       <a href="#" onclick="swapStyleSheet('default.css')">Default</a> 
       <a href="#" onclick="swapStyleSheet('dark.css')">Dark</a> 
      </div> 

ich Ihnen raten, sonst eine Bibliothek wie jQuery oder etwas zu verwenden.

Verwandte Themen