Knop om website header kleur te veranderen

[maxdemeern]

Hallo,

Ik wil graag een knop op mijn website plaatsen waarmee de kleur van de header van de site verandert.
Hoe doe ik dit? (in HTML)

De CSS code van de header is:

#header-wrap {
background: #CDCDCD
}

Alvast bedankt

 

[TimVN]

Als je een hele color picker, zoals je deze bijvoorbeeld ook in Paint heb op je website wil hebben kun je dit gebruiken:
http://jscolor.com/download.php
Voor een knop, het volgende in je header:

<script type='text/javascript'>
function changeHeader(col) {
    document.getElementById('header-wrap').style.backgroundColor = col;
}
</script>

En dit ergens op je pagina:

<button onClick='changeHeader(454545);'>Verander kleur</button>

454545 is trouwens de kleur code die je wilt gebruiken. Zoals #CDCDCD maar dan zonder het hekje. Denk er aan dat je div id header-wrap moet zijn.

 

[maxdemeern]

Werkt niet

 

[TimVN]

Geef mij de link even, als je chrome gebruikt (miss FF ook) kun je CTRL+Shift+J drukken om de console te openen. Misschien dat de javascript een error geeft. Ik heb het getest en het moet werken. Heb je <div id='header-wrap'></div> staan? En niet alleen de class?

 

[csshunter]

Gokje wagen: het hekje moet er wel bij, en ook een extra setje aanhalingstekens (omdat het een string is, en geen variabele):

<button onclick="changeHeader('#454545');">Verander kleur</button>

Maar als de nieuwe kleur tevoren al bekend is, dan kan het met alleen:

<button onclick="changeHeader();">Verander kleur</button>

en
[JS]<script type='text/javascript'>
function changeHeader() {
document.getElementById('header-wrap').style.backgroundColor = '#454545';
}
</script>[/JS]

=======
Een heen-en-terug wisselaar kan ook, dan wordt het:
[JS]<script type='text/javascript'>
function changeHeader() {
if ( document.getElementById('header-wrap').style.backgroundColor != '#454545' ){
document.getElementById('header-wrap').style.backgroundColor = '#454545';
}
else {
document.getElementById('header-wrap').style.backgroundColor = '#CDCDCD';
}
}
</script>[/JS]
Bij de tweede klik op dezelfde knop verandert de backgroundkleur dan weer terug.

Met vriendelijke groet,
CSShunter