diedVIPs

html knowhow

Hindergrundfarbe per Button ändern












Hindergrundfarbe per Button ändern

So sieht´s aus

☁ Dunkel ☺ Farbig

Wollen Sie lieber eine Helle oder Dunkele Seitenansicht


Quellcode
<html>
<head>

<script>
function daynight(modus) {
if (modus == "night") {
window.localStorage.setItem("modus", "night");
var cssLocation = "../Scripte/night.css";
}

if (modus == "day") {
window.localStorage.setItem("modus", "day");
var cssLocation = "../Scripte/day.css";
}
var objStyle = document.createElement("style");
var objText = document.createTextNode("@import url(" + cssLocation + ") screen;");
objStyle.appendChild(objText);
document.getElementsByTagName("html")[0].appendChild(objStyle);
}
</script>

<style type="text/css">
span#buttonDunkel { letter-spacing: 2px; width: 95px; padding: 7px; color: #FFFFFF; background-color: #000000; border: Solid 1px #DDDDDD; display: Inline-Block; text-align: Center; cursor: Pointer; user-select: None; transition: color 0.3s; } span#buttonHell { letter-spacing: 2px; width: 95px; padding: 7px; color: #000000; background-color: #FFFFFF; border: Solid 1px #DDDDDD; display: Inline-Block; text-align: Center; user-select: None; cursor: Pointer; transition: color 0.3s; } span#buttonDunkel:hover, span#buttonHell:hover { color: #FFD700; }</script>
</style>
</head>

<body >
<center><p>
<span id="buttonDunkel" onClick="daynight(`night`)">&#9729; Dunkel</span>
<span id="buttonHell" onClick="daynight(`day`)">&#9786; Farbig</span>
</p><p><small>Wollen Sie lieber eine Helle oder Dunkele Seitenansicht</small></p></center>
</body>

</html>
Eine externe Datei anlegen mit Namen: night.css
td { background-color: #f0f0f0;}
body { background-color:#5c5c5c; color:black;}
Eine externe Datei anlegen mit Namen: day.css
td { background-color:#D7FFF9;}
body { background-color: #D2FFEA; color: navy;}








Kontakt    Datenschutz   Impressum