Javascript 如何获取和设置来自类的对象的样式属性？

我有一个简单的动画功能，通过改变宽度模拟按下的按钮：

function bPress(b) {
  var w = (parseFloat(b.style.width)*0.96);
  if (b.style.width.substr(-1)=="%") {
    var s ="%";
  }
  else {
    var s = "em";
  }
    b.style.width = w +s;
    b.onmouseup = function () {
      w = (parseFloat(b.style.width)/0.96);
      b.style.width = w+s;
    // etc.
}

在我开始清理代码并将内联CSS样式声明更改为类之前，这一切都很好。例如，我以前有：

<div style= 'height: 1.5em; width: 100%; margin: 0 auto; margin-top: 0.2em; font: inherit; font-weight:bold' onclick='checkSave("continue")' onmousedown='bPress(this)'>Continue</div>

。。。避免重复，当然也简化了div标记。 但是动画停止了工作。经过一些实验，我最终找到了一个临时解决方案，将宽度移回内联样式声明中。但这似乎是错误的

因此，有两个问题：

如果在类中声明了宽度，为什么这个.style.width不起作用？ 如果div的属性是在类中声明的，有没有办法获取和设置它们？ 编辑：为了完整起见，使用nick zoum的答案，这里是修改后的bPress函数：

function bPress(b) {
  var w_px = window.getComputedStyle(b).width;
  var w_int = (parseInt(w_px));
  b.style.width = Math.round(w_int * 0.96) + "px";
  b.onmouseup = function () {
    b.style.width = w_px;
  }
}

可以使用getComputedStyle获取元素的所有计算样式属性

var dom=document.querySelectorfoo； console.loggetComputedStyledom.backgroundColor； 福{ 背景色：红色； 宽度：10px； 高度：10px； }

---

你是不是忘了放一张卡片；宽度后：100%？@Huangism是的，但仅在示例中。当我将代码移回内联时，我实际上已经从代码中删除了宽度，并且忘记了宽度；当我把它加在这里的时候。谢谢你指出这一点。我会改正的。谢谢。我会调查的。是否有类似的setComputedStyle函数？@Thailandian没有setComputedStyle，但您可以只执行dom.style.width=20px。所以我想是的。谢谢尼克·佐姆，它工作正常，而且实际上简化了动画功能。我通常不使用px，因为我会根据窗口/屏幕大小缩放所有内容。但我意识到getComputedStyle是否返回px并不重要。我只是在bPress函数内部使用px。

function bPress(b) {
  var w_px = window.getComputedStyle(b).width;
  var w_int = (parseInt(w_px));
  b.style.width = Math.round(w_int * 0.96) + "px";
  b.onmouseup = function () {
    b.style.width = w_px;
  }
}