JavaScript动态调整元素尺寸：变量声明与CSS单位的实践指南
在前端开发中，我们经常会遇到需要根据用户操作、窗口大小变化或者数据状态动态调整页面元素尺寸的场景。实现这个功能的核心逻辑很简单：先获取需要调整的目标元素，再通过JavaScript修改元素的CSS样式属性，就可以完成尺寸调整。在这个过程中，合理选择变量声明方式和正确使用CSS单位，是保证代码可维护性和功能正常生效的关键。
变量声明方式的选择
在JavaScript中获取DOM元素的时候，我们常用的变量声明方式有var、let、const三种，三者的特性和适用场景有明显区别：
- var：存在变量提升，作用域是函数级，重复声明不会报错，现在更推荐用let和const替代，除非需要兼容非常老旧的浏览器。
- let：不存在变量提升，作用域是块级，允许修改绑定的值，适合存储后续可能需要重新赋值的元素引用或者尺寸数值。
- const：不存在变量提升，作用域是块级，声明后不能重新赋值，适合存储不会变更的元素引用，能有效避免意外修改导致的错误。
当我们获取DOM元素的时候，如果后续不会重新给这个变量赋值其他元素，优先使用const声明，这样可以在代码层面固化引用，减少不必要的错误。
CSS单位的正确使用
修改元素尺寸的时候，CSS单位的选择直接影响最终效果，常见的尺寸单位有：
- px：绝对单位，1px对应屏幕上的一个物理像素点，尺寸固定，不会随父容器或者窗口大小变化。
- %：相对单位，相对于父容器的对应尺寸计算，比如宽度设为50%，就是父容器宽度的一半。
- rem：相对单位，相对于根元素（html标签）的font-size计算，适合做响应式布局的尺寸适配。
- vw/vh：相对单位，vw是视口宽度的1%，vh是视口高度的1%，直接关联当前窗口的尺寸。
动态调整尺寸的时候，要根据实际需求选择单位：如果需要固定尺寸就用px，如果需要跟随父容器变化就用%，如果要做全局响应式适配可以优先考虑rem或者vw/vh。
完整实践示例
下面是一个完整的可运行示例，实现了点击按钮动态调整目标盒子的宽度和高度，同时展示了不同变量声明方式和CSS单位的使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态调整元素尺寸示例</title>
<style>
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
border: 1px solid #eee;
}
#targetBox {
width: 200px;
height: 150px;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease; /* 添加过渡效果，尺寸变化更平滑 */
}
.btn-group {
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #333;
color: #fff;
}
button:hover {
background-color: #666;
}
</style>
</head>
<body>
<div class="container">
<div id="targetBox">我是可调整尺寸的目标元素</div>
<div class="btn-group">
<button id="increaseBtn">增加尺寸(px单位)</button>
<button id="decreaseBtn">减小尺寸(px单位)</button>
<button id="percentBtn">调整为父容器80%(%单位)</button>
<button id="resetBtn">重置尺寸</button>
</div>
</div>
<script>
// 使用const声明不会重新赋值的DOM元素引用
const targetBox = document.getElementById('targetBox');
const increaseBtn = document.getElementById('increaseBtn');
const decreaseBtn = document.getElementById('decreaseBtn');
const percentBtn = document.getElementById('percentBtn');
const resetBtn = document.getElementById('resetBtn');
// 使用let声明可能会修改的尺寸步长值
let step = 20;
// 增加尺寸：使用px单位，每次宽度和高度各增加20px
increaseBtn.addEventListener('click', function() {
// 获取当前宽度和高度，parseInt转换为数字，去掉单位
let currentWidth = parseInt(targetBox.style.width) || 200;
let currentHeight = parseInt(targetBox.style.height) || 150;
// 修改尺寸，注意要拼接单位
targetBox.style.width = (currentWidth + step) + 'px';
targetBox.style.height = (currentHeight + step) + 'px';
});
// 减小尺寸：使用px单位，每次宽度和高度各减少20px，最小不小于50px
decreaseBtn.addEventListener('click', function() {
let currentWidth = parseInt(targetBox.style.width) || 200;
let currentHeight = parseInt(targetBox.style.height) || 150;
let newWidth = Math.max(50, currentWidth - step);
let newHeight = Math.max(50, currentHeight - step);
targetBox.style.width = newWidth + 'px';
targetBox.style.height = newHeight + 'px';
});
// 调整为父容器80%：使用%单位，相对父容器计算尺寸
percentBtn.addEventListener('click', function() {
targetBox.style.width = '80%';
targetBox.style.height = '200px'; // 高度仍用px固定，混合使用单位
});
// 重置尺寸到初始状态
resetBtn.addEventListener('click', function() {
targetBox.style.width = '200px';
targetBox.style.height = '150px';
});
</script>
</body>
</html>上面的代码中，我们用const声明了所有DOM元素引用，因为这些引用在页面生命周期内不会变更；用let声明了步长变量step，后续如果需要调整步长大小可以直接修改这个值。尺寸调整的时候，px单位的场景直接拼接'px'字符串，%单位的场景拼接'%'字符串，就能正确生效。
注意事项
在实际开发中，有几个细节需要特别注意：
- 修改元素样式的时候，直接操作style对象只能获取内联样式，如果元素的尺寸是通过CSS类定义的，可能需要先获取计算后的样式，再修改值，避免取值错误。
- 如果元素本身的尺寸是通过CSS类设置的，直接用style修改内联样式会覆盖类样式，重置的时候如果要恢复类样式，可以直接把style对应的属性设为空字符串，比如
targetBox.style.width = ''。 - 动态修改尺寸的时候，如果不需要过渡效果，可以去掉CSS里的transition属性，避免不必要的性能消耗。
只要合理选择变量声明方式，正确使用CSS单位，就能快速实现稳定可靠的动态元素尺寸调整功能，适配各种业务场景的需求。