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

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

@KathrineHanson Yes, it does, please read Wes Ruvalcaba's answer very carefully. — Teemu, Mar 03 '20 at 15:36
Well, at the time the question was asked, CSS variables didn't exist. Changing the class or some other CSS selectable attribute was the only reasonable way in 2010 (and still is, if you have to support older browsers). Notice, that Wes has answered the question 8 years later. — Teemu, Mar 03 '20 at 15:50

score 2 · Answer 1 · answered Mar 03 '20 at 15:27

2

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.

answered Mar 03 '20 at 15:27

Ian

5,704
6
40
72

1

hi. the first solution will not work because it will hide completely the list. I just want to hide the :before pseudo element or add to it the opacity to null. How to do it? – Kathrine Hanson Mar 03 '20 at 15:30

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

1 Answers1

Linked