点击什么颜色就在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
TA贡献1836条经验 获得超13个赞
// 页面加载
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;
}
}
}
米脂
TA贡献1836条经验 获得超3个赞
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';
}
}
}
添加回答
举报
0/150
提交
取消