js 动态设置div宽度

在JavaScript中动态设置div元素的宽度可以通过多种方式实现，以下是基础概念及具体实现方法：

基础概念

DOM操作：JavaScript可以通过DOM（Document Object Model）来访问和修改HTML元素。
样式属性：通过修改元素的style属性可以直接改变其CSS样式。

实现方法

方法一：直接设置内联样式

你可以直接通过JavaScript设置div元素的style.width属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Width Example</title>
</head>
<body>
    <div id="myDiv" style="background-color: lightblue;">Hello World!</div>
    <button onclick="setDynamicWidth()">Set Dynamic Width</button>

    <script>
        function setDynamicWidth() {
            var div = document.getElementById('myDiv');
            div.style.width = '200px'; // 设置宽度为200像素
        }
    </script>
</body>
</html>

方法二：通过CSS类切换

你可以预先定义一些CSS类，然后通过JavaScript切换这些类来改变div的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Width with CSS Classes</title>
    <style>
        .width-small {
            width: 100px;
        }
        .width-large {
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="width-small" style="background-color: lightgreen;">Hello World!</div>
    <button onclick="toggleWidth()">Toggle Width</button>

    <script>
        function toggleWidth() {
            var div = document.getElementById('myDiv');
            if (div.classList.contains('width-small')) {
                div.classList.remove('width-small');
                div.classList.add('width-large');
            } else {
                div.classList.remove('width-large');
                div.classList.add('width-small');
            }
        }
    </script>
</body>
</html>