浅做一个调整div属性的demo

最新推荐文章于 2024-10-02 23:33:51 发布

m0_63636870

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量111

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_63636870/article/details/126012877

版权

浅做一个调整div属性的demo

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 100px;
            width: 100px;
            background-color: rgb(179, 110, 110);
            border: solid 1px;
        }

        #btn {
            height: 30px;
            width: 100px;
            float: left;
        }
        #reset{
            height: 30px;
            width: 100px;
        }

        #adjust-box {
            display: none;
            height: 300px;
            width: 300px;
            background-color: rgb(207, 207, 207);
            border: 1px;
            margin-left: auto;
            margin-right: auto;
            flex-direction: column;
            justify-content: space-between;
            position: fixed;
            top: 300px;
            left: 600px;
        }

        #color1 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            margin: 10px;
        }

        #color2 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: rgb(0, 0, 0);
            color: #fff;
            margin: 10px;
        }

        #color3 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: rgb(84, 136, 233);
            margin: 10px;
        }

        .color {
            height: 30%;
            width: 100%;
        }

        .height {
            height: 30%;
            width: 100%;
        }

        #height1 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }

        #height2 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }

        #height3 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }

        #width1 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }

        #width2 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }

        #width3 {
            height: 50px;
            width: 50px;
            float: right;
            background-color: #fff;
            border: 1px solid;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h1>改变div属性</h1>
    <button id="btn">点击调整属性</button>
    <button id="reset">恢复初始属性</button>
    <div id="box"></div>
    <div id="adjust-box">
        <div class="color">
            <span>颜色</span>
            <button id="color1">白色</button>
            <button id="color2">黑色</button>
            <button id="color3">蓝色</button>
        </div>
        <div class="height">
            <span>高度</span>
            <button id="height1">200px</button>
            <button id="height2">300px</button>
            <button id="height3">400px</button>
        </div>
        <div class="width">
            <span>宽度</span>
            <button id="width1">200px</button>
            <button id="width2">300px</button>
            <button id="width3">400px</button>
        </div>
    </div>


    <script>
        var btn = document.getElementById('btn');
        var adjustbox = document.getElementById('adjust-box');
        var box = document.getElementById('box');
        var color1 = document.getElementById('color1');
        var color2 = document.getElementById('color2');
        var color3 = document.getElementById('color3');
        var height1 = document.getElementById('height1');
        var height2 = document.getElementById('height2');
        var height3 = document.getElementById('height3');
        var width1 = document.getElementById('width1');
        var width2 = document.getElementById('width2');
        var width3 = document.getElementById('width3');
        var reset = document.getElementById('reset');
        btn.onclick = function () {
            adjustbox.style.display = 'flex';
        }
        color1.onclick = function () {
            box.style.backgroundColor = "white";
        }
        color2.onclick = function () {
            box.style.backgroundColor = "black";
        }
        color3.onclick = function () {
            box.style.backgroundColor = "rgb(84, 136, 233)";
        }
        height1.onclick = function () {
            box.style.height = "200px";
        }
        height2.onclick = function () {
            box.style.height = "300px";
        }
        height3.onclick = function () {
            box.style.height = "400px";
        }
        width1.onclick = function(){
            box.style.width = "200px";
        }
        width2.onclick = function(){
            box.style.width = "300px";
        }
        width3.onclick = function(){
            box.style.width = "400px";
        }
        reset.onclick = function(){
            box.style.cssText = "height: 100px;width: 100px;background-color: rgb(179, 110, 110);"
        }
    </script>
</body>

</html>