Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'opacity' property is read-only [duplicate]

Question

I am trying to set the property value of my pseudo element css class via javascript file.

The problem is that I am getting the error shown in the title.

Is there any other way to set it?

Code in css:

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

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

Code in typescript file:

  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

You aren't allowed to write to the styles returned by getComputedStyle if they were computed by the browser (ie not set by JavaScript already or by a CSS file).

Instead of list.setProperty('opacity', '0'), use scrollList.style.opacity = "0" or add an opacity rule to the .list selector in your CSS.