js怎么改变div里面的内容
点击什么颜色就在DIV背景显示什么颜色，然后我是div 就变成选中的颜色文字 比如:选中黄色 div里面的文字改变成 我的背景颜色是yellow
这个到底怎么去实现的啊？我写了很多个方式代码都没法实现这个，百度和谷歌上面也没有找到我想要的答案，有大佬帮我解答下吗？就是不会怎么设置改变div里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
border: 2px solid gray;
margin: 100px 0 0 200px;
}
</style>
<script type="text/javascript">
// 页面加载
window.onload=init;
//初始化函数
function init() {
// 获取下拉菜单
var bgcolor=document.getElementById("bgcolor");
var div1=document.getElementById("div1");
// 给下拉菜单绑定change事件
bgcolor.onchange=function() {
// 选中当前的值
}
}
</script>
</head>
<body>
<div>
<span>请选择你喜欢的颜色:</span>
<select id="bgcolor">
<option value="">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div1">我是div</div>
</body>
</html>
眼眸繁星3回答
-
开心每一天1111
// 页面加载window.onload = init;//初始化函数function init() { // 获取下拉菜单 var bgcolor = document.getElementById("bgcolor"); var div1 = document.getElementById("div1"); // 给下拉菜单绑定change事件 bgcolor.onchange = function () { // 选中当前的值 var color = bgcolor.value; if(color){ div1.style.backgroundColor = color; div1.innerHTML = '我的背景颜色是' + color; } }} -
FFIVE
-
米脂
function init() { // 获取下拉菜单 var bgcolor = document.getElementById("bgcolor"); var div1 = document.getElementById("div1"); // 给下拉菜单绑定change事件 bgcolor.onchange = function (event) { // 选中当前的值 let color = event.target.value; switch (color) { case 'yellow': div1.style.backgroundColor = color; div1.innerHTML = '我的背景颜色是' + color; break; case 'orange': div1.style.backgroundColor = color; div1.innerHTML = '我的背景颜色是' + color; break; case 'pink': div1.style.backgroundColor = color; div1.innerHTML = '我的背景颜色是' + color; break; case 'purple': div1.style.backgroundColor = color; div1.innerHTML = '我的背景颜色是' + color; break; default: div1.style.backgroundColor = 'white'; div1.innerHTML = '我是div'; } }}
随时随地看视频慕课网APP
相关分类
JavaScript