javascript - 无法在 'setProperty' : These styles are computed, 上执行 'CSSStyleDeclaration',因此 'opacity' 属性为只读

标签 javascript css getelementbyid pseudo-element getcomputedstyle

<分区>

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

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

还有其他方法可以设置吗?

CSS 代码:

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

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

typescript 文件中的代码:

  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");
    }
  }

最佳答案

如果 getComputedStyle 返回的样式是由浏览器计算的(即不是由 JavaScript 或 CSS 文件设置的),则不允许写入这些样式。

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

关于javascript - 无法在 'setProperty' : These styles are computed, 上执行 'CSSStyleDeclaration',因此 'opacity' 属性为只读,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60510438/

相关文章:

jquery - Megamenu,从顶部显示的子菜单

css - 导航栏折叠(Ipad 菜单)不会在 Bootstrap 中自行展开

css - npm 脚本中的自动前缀显示 TypeError : Patterns must be a string or an array of strings

Javascript:GetElementById - DOM何时命中?

javascript - 将函数参数传递到 getElementById "id"

javascript - 如何在不影响 DOM 的情况下获取 HTML 的克隆、修改、获取 HTML 字符串?

javascript - 如何在 JavaScript 中使用 MDCSlider?

javascript - 从一系列 onMouseOver 事件创建循环

javascript - jquery如何取消选中此代码中的单选按钮

javascript - Vue.JS 表格行 CSS 随数据变化