JavaScript动态控制Div属性实例

Jasper

发布时间：2026-10-13| 2人浏览过

原创

在前端开发中，经常需要根据用户操作动态改变网页元素的视觉呈现。本文详细介绍如何使用 JavaScript 动态操控 HTML div 的几何尺寸、颜色以及显示隐藏等核心属性，并附带可直接运行的完整代码。

动态更改元素样式的目标

通过脚本实时调整 DOM 对象的内联样式（Inline Styles），可以实现丰富的前端交互体验。主要实现的功能包括：

调整元素宽度：width
调整元素高度：height
更改背景颜色：background
控制元素显隐：display
清除自定义样式：恢复初始状态

运行这些功能的效果如下：

操作步骤

第1步：搭建基础 HTML 结构

准备一个包含多个操作按钮和一个目标容器的布局。为了演示效果，容器需具备基本的宽高和背景。

<div id="outer">
    <!-- 控制按钮组 -->
    <input type="button" value="变宽" />
    <input type="button" value="变高" />
    <input type="button" value="改变颜色" />
    <input type="button" value="隐藏" />
    <input type="button" value="重置" />
    
    <!-- 待操控的目标 Div -->
    <div id="div1"></div>
</div>

第2步：编写 CSS 样式

为页面设置居中布局，并为目标 #div1 赋予默认值（宽度100px、黑色背景等）。

<style>
#outer {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#div1 {
    width: 100px;
    height: 100px;
    background: black;
    margin: 10px auto;
    display: block;
}
</style>

第3步：编写 JavaScript 逻辑

利用数组存储对应的样式属性名及其新值，并通过事件循环为每个按钮绑定动作。

定义工具函数：创建一个通用的 changeStyle 方法，接受元素对象、属性名和目标值进行赋值。
获取节点集合：获取所有输入按钮 input 和目标容器 div。
初始化数据映射：
- oAtt (属性名): ["width", "height", "background", "display", "display"]
- oVal (目标值): ["200px", "200px", "red", "none", "block"]
循环绑定事件：遍历按钮，将当前索引存入 index 属性，监听点击事件执行样式切换或重置。

<script>
// 1. 通用样式修改函数
var changeStyle = function (elem, attr, value) {
    elem.style[attr] = value;
};

window.onload = function () {
    // 2. 获取所需节点
    var oBtn = document.getElementsByTagName("input");
    var oDiv = document.getElementById("div1");
    
    // 3. 建立属性到值的映射关系
    var oAtt = ["width","height","background","display","display"];
    var oVal = ["200px","200px","red","none","block"];
    
    // 4. 为每个按钮绑定点击事件
    for (var i = 0; i < oBtn.length; i++) {
        oBtn[i].index = i; // 将索引暂存在元素上
        oBtn[i].onclick = function () {
            // 如果点击的是最后一个按钮(索引等于总数-1)，则执行重置
            if (this.index == oBtn.length - 1) {
                oDiv.style.cssText = "";
            } else {
                // 调用函数修改对应索引的属性
                changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
            }
        }
    }
};
</script>