How to alter `pseudo` style values in JavaScript dynamic?

Asked Dec 23 '20 at 03:54

Active Dec 23 '20 at 04:27

Viewed 64 times

I can able to get the value like this:

const childStyle = window.getComputedStyle(child, '::before');
const left = childStyle.getPropertyValue('left');

but while I try to alter like this:

  const childStyle = window.getComputedStyle(child, '::before');
  const left = childStyle.getPropertyValue('left');
  childStyle.setProperty('left', '0'); //setting not works
  console.log('childStyle', left);

getting an error as:

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

what is the correct way to alter the value of left here? please help me.

edited Dec 23 '20 at 04:27

asked Dec 23 '20 at 03:54

user2024080

Have you tried `element.style.left`? – Rajesh Dec 23 '20 at 03:58
this is not for element, it's for elements psudo. – user2024080 Dec 23 '20 at 04:10
`getComputedStyle` returns readonly styles of an element. So mutation will not be possible. You can try to fetch elements and then set property. – Rajesh Dec 23 '20 at 04:12
how to get elements 'after` `before` element from JavaScript? – user2024080 Dec 23 '20 at 04:13
3

I found this: `":after" is a pseudo element, not an element. You can not return a dom node, it isn't one - all you can do it get the styles` – user2024080 Dec 23 '20 at 04:15

How to alter `pseudo` style values in JavaScript dynamic?

0 Answers0