javascript - 无法在“CSSStyleDeclaration”上执行“setProperty”：这些样式是计算出来的，因此“opacity”属性是只读的

Question

我正在尝试通过 javascript 文件设置我的伪元素 css 类的属性值。

问题是我收到标题中显示的错误。

有没有其他方法可以设置？

CSS中的代码：

.list {
  display: flex;
  overflow-x: scroll !important;

  &:before {
    content: '';
    background: linear-gradient(90deg, transparent, white 10px);
  }
}

打字稿文件中的代码：

  protected onScroll() {
    const scrollList = document.getElementById('list');
    const list: CSSStyleDeclaration = window.getComputedStyle(document.querySelector('.list'), ':before');
    if (list.scrollWidth - list.scrollLeft === list.offsetWidth) {
      list.setProperty('opacity', '0');
    } else {
      console.log("not set");
    }
  }

Answer 1

getComputedStyle如果它们是由浏览器计算的（即不是由 JavaScript 或由 CSS 文件设置的），则不允许您写入返回的样式。

代替，在 CSS 中list.setProperty('opacity', '0')使用scrollList.style.opacity = "0"或添加opacity规则到选择器。.list