Question

我想在用户选择颜色选择器中的特定颜色时更改div的背景颜色。例如，如果用户从颜色选择器中选择红色，则背景应变为红色。这里重点是我们不应该使用jquery来改变它。而不是使用jquery，（可以使用javascript）当用户选择特定颜色时，应该将该特定div的css样式添加到div中。

<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 ;
}

提前感谢..

Answer 1

您需要使用Javascript才能正确执行此操作。

以下是一个示例：http://jsfiddle.net/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; 
})

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.com/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>

当用户在颜色选择器中选择特定颜色时，如何更改div的背景颜色？

2 个答案: