CODEWITHSUNDEEP
javascript
Patel
Patel

Reputation: 585

dynamic color change using javascript

can anyone pls give sugessions or ideas on how to write the script for selecting a color in a live page so that the selected color should apply to whole page.thanks in advance.

Upvotes: 3

Views: 6871

Answers (3)

Sampson
Sampson

Reputation: 268344

Online demo: http://jsbin.com/ezeze

document.getElementById("colors").onchange = function(){ 
  document.getElementById("container").style.color = this.value; 
}

--

<select name='colors' id='colors'> 
  <option>red</option> 
  <option>green</option> 
  <option>blue</option> 
</select> 
<div id="container"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
  <p>Curabitur dolor metus, aliquam in convallis ut, pharetra ac enim.</p> 
  <p>Ut lobortis justo in dolor rutrum vulputate.</p> 
</div>

Upvotes: 0

Darmen Amanbay
Darmen Amanbay

Reputation: 4881

Basically as darren says you should change your body color with jQuery selector. A simple UI can be found here, for example jQuery ColorPicker.

Upvotes: 1

D.C.
D.C.

Reputation: 15588

A common way to do this is with a Javascript support framework like jquery. Using jQuery you can select elements in your html and change their attributes. For example if you wanted to set the background color for all your div elements, you would do:

$("div").css("background-color", "blue");

Here the $ function lets you select DOM elements (html elements that are part of your loaded page), and the css function applies some css rule to them.

Upvotes: 0

Related Questions