javascript - how to change the background color of the div when a user selects particular color in the color picker?

I want to change the background color of div when a user picks the particular color in the color picker. For example If user selects red from the color picker then the background should change into red. The important point here is we shouldn't use jquery to change this. Instead of using jquery,(can use javascript) the css styles of that particular div should be added to the div when user selects particular color.

<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar">
<form>
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</form>
</div>

css :

@charset "utf-8";
/* CSS Document */
.sideBar
{
    width: 300px;
    float: left;
    height: 500px;
    background: blue;
}
.mainBar
{
    width: 100% ;
    height: 500px;
    background: #96F ;
}

thanks in advance..

<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar">
<form>
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</form>
</div>

css :

@charset "utf-8";
/* CSS Document */
.sideBar
{
    width: 300px;
    float: left;
    height: 500px;
    background: blue;
}
.mainBar
{
    width: 100% ;
    height: 500px;
    background: #96F ;
}

thanks in advance..

Share Improve this question edited Jul 7, 2014 at 13:06 asked Jul 7, 2014 at 13:00 arjun 5601 gold badge9 silver badges27 bronze badges

Without javascript you would have to write your own PHP logic that happes after a form submit. – Sebsemillia Commented Jul 7, 2014 at 13:03
1 No javascript at all? or just no jquery? – rob Commented Jul 7, 2014 at 13:03
@rob w can use javascript... how to achieve this ???? – arjun Commented Jul 7, 2014 at 13:07

Add a ment |

2 Answers 2

Sorted by: Reset to default 10

You will need Javascript to do this properly.

Here is an example: http://jsfiddle/XZ6Sg/

HTML:

<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
<div></div>

Javascript:

var picker = document.getElementById('colorPicker');
var box = document.getElementsByTagName('div')[0];
picker.addEventListener('change', function(){
   box.style.backgroundColor = this.value; 
})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Dynamic</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar"> 
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</div>
<script type="text/javascript" src="http://code.jquery./jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var colorPick = $('#colorPicker');
var styleElt =  '<style></style>';
colorPick.on('change', function(){
    console.log($(this).val());
    var selectedVal = $(this).val();
    $('head').html('<style>.sideBar{background-color:'+ selectedVal +'}</style>');
});
</script>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to change the background color of the div when a user selects particular color in the color picker? - Stack Ove

2 Answers 2