如何将DOM元素width值存入变量并用于增减按钮函数？

核心问题：你修改变量myWidth后，没有将新值同步回DOM元素的style.width属性。变量只是内存中的独立数值，和DOM样式没有自动绑定关系，所以仅修改变量不会触发页面元素的宽度变化。

代码问题拆解 #

• 初始代码中，myWidth = parseInt(rectangle.style.width)确实拿到了100的数值，但shrinkBtn函数里只修改了myWidth的值，没有把新值赋值给rectangle.style.width，导致浏览器没有收到更新样式的指令。
• 直接操作rectangle.style.width的写法能生效，是因为它直接修改了DOM元素的样式属性，浏览器会立即重新渲染元素。

修正后的代码 #

方案一：用变量维护状态，同步更新DOM #

rectangle.style.width = "100px";
// 初始时获取数值类型的宽度值
var myWidth = parseInt(rectangle.style.width);
console.log(myWidth);

decreaseBtn.addEventListener("click", shrinkBtn);
increaseBtn.addEventListener("click", growBtn);

function shrinkBtn() {
  // 直接对数值进行运算
  myWidth -= 10;
  // 将新值同步到DOM样式
  rectangle.style.width = myWidth + "px";
}

function growBtn() {
  myWidth += 10;
  rectangle.style.width = myWidth + "px";
}

补充：处理非内联样式的场景 #

如果元素的宽度是通过CSS类而非内联style设置的，rectangle.style.width会返回空字符串，此时需要用getComputedStyle获取实际渲染的宽度：

// 获取元素实际渲染的宽度
var computedWidth = window.getComputedStyle(rectangle).width;
var myWidth = parseInt(computedWidth);

关键注意点 #

• 尽量保持myWidth为数值类型，避免反复使用parseInt转换，减少不必要的计算。
• 任何时候修改宽度变量后，必须将新值赋值给rectangle.style.width，才能让页面上的元素宽度发生变化。

内容的提问来源于stack exchange，提问作者Christian S