HTML 是网页的基石，而 CSS 则负责网页的布局和样式。在前端开发中，我们通常使用 CSS 选择器来选取 HTML 元素并设置其样式。然而，在某些情况下，我们需要使用 JavaScript 动态地修改 HTML 元素的属性，例如 div 元素的宽度和高度。
div 元素的宽度和高度
div 元素是一个常用的 HTML 块级元素，用于组织页面结构和布局。默认情况下，div 元素的宽度和高度由其内部内容和 CSS 样式共同决定。如果没有设置宽度和高度，那么 div 元素会自动填满其父元素的可用空间。
在某些场景下，我们可能需要手动设置 div 元素的宽度和高度，例如：
- 将多个 div 元素按比例分配容器的宽度或高度；
- 根据浏览器窗口大小动态调整 div 元素的宽度和高度；
- 实现类似于拖拽缩放的效果，让用户可以改变 div 元素的大小。
在 JavaScript 中设置 div 宽度和高度
在 JavaScript 中设置 div 元素的宽度和高度，我们可以使用以下两种方法：
1. 使用 style 属性
我们可以通过修改 div 元素的 style 属性，来改变其宽度和高度。例如：
----- --- - --------------------------------- -- ----- --- -- --------------- - -------- -- ----- --- -- ---------------- - --------
需要注意的是，使用 style 属性设置样式时，应该遵循以下几点：
- 样式属性名应该采用驼峰式命名，例如 width、height、backgroundColor；
- 样式属性值应该采用字符串形式表示，例如 '200px'、'100%'、'#ff0000'。
2. 使用 CSS 类
另一种设置 div 元素宽度和高度的方法是使用 CSS 类。我们可以在 CSS 文件中定义一个类，并将其应用于 div 元素。例如：
-------- - ------ ------ ------- ------ -
然后，在 JavaScript 中使用 classList 属性，将该类添加到 div 元素上即可：
----- --- - --------------------------------- -----------------------------
需要注意的是，使用 CSS 类设置样式时，应该遵循以下几点：
- CSS 类名称应该以英文字母开头，不能包含空格或特殊字符；
- 在 CSS 文件中定义的样式属性值应该采用标准的 CSS 语法表示。
示例代码
下面是一个简单的示例，演示如何在 JavaScript 中设置 div 元素的宽度和高度：
--------- -----
------
------
--------- --- -------------
-------
-------- -
------ ------
------- ------
----------------- --------
-
--------
-------
------
---- ----------------- ------------
------- ----------------------------------------------
--------
-------- ------------------- -
----- --- - ---------------------------------
--------------- - --------
---------------- - --------
-
---------
-------
-------在上述示例中，我们首先定义了一个 CSS 类 .myClass，其中设置了 div 元素的宽度、高度和背景颜色。然后，在 JavaScript 中定义了一个 setWidthAndHeight 函数，并将其绑定到按钮的点击事件上。该函数通过修改 div
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12177