问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js怎么改变div里面的内容

头像
桃花岛岛主
    5138
    头像
    fenbox
    6.8k237979
    新手上路，请多包涵

    点击什么颜色就在DIV背景显示什么颜色，然后我是div 就变成选中的颜色文字 比如:选中黄色 div里面的文字改变成 我的背景颜色是yellow

    这个到底怎么去实现的啊？我写了很多个方式代码都没法实现这个，百度和谷歌上面也没有找到我想要的答案，有大佬帮我解答下吗？就是不会怎么设置改变div里面

    clipboard.png

    <!DOCTYPE html>
<html lang="en">
<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>
    javascript
    阅读 7.9k
    3 个回答
    得票最新
    头像
    jacktown
      59711020
      ✓ 已被采纳
      // 页面加载
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;
        }
    }
}
      头像
      你好路人甲
        44549

        clipboard.png

        头像
        babe
          963129
           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';
        }

    }
}
          查看全部 3 个回答
          推荐问题