JavaScript应用：调整边框的形状及背景颜色

最新推荐文章于 2025-07-01 10:23:05 发布

原创最新推荐文章于 2025-07-01 10:23:05 发布 · 6.5k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的动态调整矩形元素大小、颜色和样式的示例。通过输入框设定矩形的宽度、高度、背景颜色、边框样式及圆角半径等属性，并点击按钮应用这些更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>调整矩形大小颜色</title>
    <style>
        div {width: 1000px;
        height: 425px;
        border: 1px solid black;}

        #div1 {width: 298px;
        height: 425px;
        border: 1px solid black;
        float: left;
        }

        #div2 {width: 698px;
        height: 425px;
        border: 1px solid black;
        float: right;
        position: relative;}

        input {width: 150px;
        height: 40px;
        margin-top: 20px;
        position: relative;
        left: 60px;}

        .input6_ {background-color: mediumslateblue;
        position: relative;
        left: 104px;}

        label {position: relative;
        left:30px;
        font-size: 20px;}

        #div3 {width: 200px;
        height: 200px;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 0px;
        /* margin: 100px auto; */
        position: absolute;
        /* left: 50%;
        top:50%;
        margin-left: -100px;
        margin-top: -100px;} */
        }
    </style>

    <script>
        window.onload=function(){
            // 获取元素
            var oInput1=document.getElementById('input1');
            var oInput2=document.getElementById('input2');
            var oInput3=document.getElementById('input3');
            var oInput4=document.getElementById('input4');
            var oInput5=document.getElementById('input5');
            var oInput6=document.getElementById('input6');
            var oDiv3=document.getElementById('div3');

            // 修改元素属性
            oInput6.onclick=function(){
                oDiv3.style.width=oInput1.value+'px';
                oDiv3.style.height=oInput2.value+'px';
                oDiv3.style.backgroundColor=oInput3.value;
                oDiv3.style.border=oInput4.value;
                oDiv3.style.borderRadius=oInput5.value;
                oDiv3.style.left="50%";
                oDiv3.style.top="50%";
                oDiv3.style.marginLeft=-oInput1.value/2+'px';
                oDiv3.style.marginTop=-oInput2.value/2+'px';

                
            }
         }
    </script>
</head>
<body>
    <div>
            <div id="div1">
                <label for="">宽度:</label>
                <input type="text" name="" id="input1"><br>
                <label for="">高度:</label>
                <input type="text" name="" id="input2"><br>
                <label for="">背景:</label>
                <input type="text" name="" id="input3"><br>
                <label for="">边框:</label>
                <input type="text" name="" id="input4"><br>
                <label for="">圆角:</label>
                <input type="text" name="" id="input5"><br>
                <input type="button" name="" id="input6" value="设置" class="input6_">

            </div>
            <div id="div2">

                <div id="div3">

                </div>


            </div>
    </div>
    
</body>
</html>

JavaScript