点击按钮修改样式

最新推荐文章于 2023-07-03 15:45:37 发布

吴机智

最新推荐文章于 2023-07-03 15:45:37 发布

阅读量400

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108474529

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    li {
        list-style: none;
        width: 90px;
        height: 22px;
        float: left;
        text-align: center;
        border: 1px solid #000;
        margin: 5px;
    }

    #box1 {
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        margin: 20px 0 0 20px;
        overflow: hidden;
        position: relative;
    }

    #box2 {
        margin: 20px 0 0 20px;
        width: 300px;
        height: 100px;
        background-color: #fff;
        border: 1px solid #000;
        display: inline-block;
    }

    #box3 {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 220px;
        height: 300px;
        padding: 10px;
        display: none;
        background-color: #fff;
    }

    #btn1 {
        margin: 20px 0 0 20px;
        vertical-align: top;
    }

    ul {
        overflow: hidden;
    }

    p {
        margin-top: 20px;
    }
</style>

<body>
    <div id="box1">
        <div id="box2"></div> <button id="btn1">点击显示div样式</button>
        <div id="box3">
            <h3>大小</h3>
            <ul>
                <li id='list1'>300*300</li>
                <li id='list2'>200*300</li>
                <li id='list3'>300*200</li>
                <li id='list4'>100*300</li>
            </ul>
            <h3>颜色</h3>
            <ul>
                <li id='list5'>#ff0000</li>
                <li id='list6'>#00ff00</li>
                <li id='list7'>#0000ff</li>
                <li id='list8'>#00ffff</li>
            </ul>
            <p><button id="btn2">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;<button id="btn3">取消</button></p>
        </div>
    </div>
    <script>
        // 效果描述: 点击显示div样式按钮, 显示右边可操作样式的盒子
        // 获取
        var btn1 = document.getElementById('btn1');
        var box3 = document.getElementById('box3');
        console.log(btn1, box3);
        // 事件
        btn1.onclick = function(){
            box3.style.display = 'block';
        }

        // 划上list1, 改变div的宽高
        var box2 = document.getElementById('box2');
        var list1 = document.getElementById('list1');
        list1.onmouseenter = function(){
            box2.style.width = '300px';
            box2.style.height = '300px';
        }

        // 点击确定，保留样式，返回点击显示div样式按钮
        var btn2 = document.getElementById('btn2');
        // 事件
        btn2.onclick = function(){
            box3.style.display = 'none';
        }

        // 点击取消按钮, 返回点击显示div样式按钮, 恢复样式
        var btn3 = document.getElementById('btn3');
        // 事件
        btn3.onclick = function(){
            box3.style.display = 'none';
            // 恢复样式: 
            // box2.style.cssText = 'width: 300px;height: 100px;background-color: #fff;';
            box2.style.cssText = null;
        }
    </script>
</body>

</html>