JS如何提取CSS属性的数值并对其进行动态修改？

你不需要手动截取子串处理，直接用JS内置的解析函数即可完成转换，同时也有更简便的原生API可以使用：

• 处理getComputedStyle返回的带单位字符串：
  用parseInt()或者parseFloat()直接解析返回结果即可，两个函数都会自动识别字符串开头的数值部分，忽略末尾的px后缀：

  let block = document.getElementById("block");
  const square = window.getComputedStyle(block)
  // 解析得到纯数字的宽度值
  const width = parseFloat(square.getPropertyValue('width'));
  // 计算完成后拼接px单位再赋值
  block.style.width = `${size.value * width}px`;
  

• 排查offsetWidth失效的问题：
  offsetWidth本身返回的就是纯数字类型的像素值，失效大多是因为执行取值逻辑时DOM还未完成渲染、或者对应元素被设置了display: none属性，你可以把逻辑放在DOM加载完成的回调中执行：

  document.addEventListener('DOMContentLoaded', () => {
    let block = document.getElementById("block");
    let width = block.offsetWidth;
    // 后续业务逻辑
  })
  

• 现代浏览器更简便的方案：
  如果你的项目不需要兼容IE及老旧版本浏览器，可以直接使用CSS Typed OM API直接获取数值，不需要做字符串解析：

  let block = document.getElementById("block");
  const width = block.computedStyleMap().get('width').value;
  block.style.width = `${size.value * width}px`;
  

内容的提问来源于stack exchange，提问作者m3.b