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

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

javascript html css

Javascript 当用户在颜色选择器中选择特定颜色时，如何更改div的背景色？,javascript,html,css,Javascript,Html,Css,当用户在颜色选择器中选择特定颜色时，我想更改div的背景色。例如，如果用户从颜色选择器中选择红色，则背景应变为红色。这里重要的一点是，我们不应该使用jquery来改变这一点。当用户选择特定颜色时，应该将特定div的css样式添加到div中，而不是使用jquery（可以使用javascript） <div class="sideBar"> <ul> <li> content 1 </li> <li> content 2 </li&g

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

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



内容1
内容2
内容3
内容4

css:
@字符集“utf-8”；
/*CSS文档*/
.侧边栏
{
宽度：300px；
浮动：左；
高度：500px；
背景：蓝色；
}
.mainBar
{
宽度：100%；
高度：500px；
背景：#96F；
}

提前感谢。

您需要Javascript才能正确完成此操作

以下是一个例子：

HTML:


色彩动力学

内容1
内容2
内容3
内容4

var colorPick=$（“#colorPicker”）；
var stylelt=''；
colorPick.on（'change'，function（））{
log（$（this.val（））；
var selectedVal=$（this.val（）；
$（'head'）.html（'.sideBar{背景色：'+selectedVal+'}'）；
});

如果没有javascript，您将不得不编写自己的

PHP

逻辑，在表单提交后发生。完全没有javascript吗？还是没有jquery？@rob w可以使用javascript。。。如何做到这一点？？？做同样的事情有没有其他选择？而不是writing box.style.backgroundColor=this.value，我需要将此样式替换为现有样式表。我不知道我了解您想要的是什么。当您不使用

时！重要信息

在css中，上述脚本将始终覆盖您在css文件中定义的规则（它会将

附加到html。当您想要使用基于用户颜色选择的预定义样式时，您必须实现一个逻辑来将用户颜色选择与css进行比较，这将是一个混乱。我想要的是，每当用户从颜色选择器中选择颜色时，该样式应在div内部添加请写一个你想要的例子。你想让所选颜色的值显示在div中吗？

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

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.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>