[JavaScript] javascript로 pseudo-element style 변경하기

[결론]

CSSStyleSheet.insertRule() 이용하면 됨.

만약 input[type=range]의 ::-webkit-slider-runnable-track의 background-image를 linear-gradient를 이용해 표현하고자 한다면 아래처럼.

// 이런게 하나 있다고 치고
<input type="range" id="input-range">


// 값이 변할때 마다 배경색으로 표현하기
document.querySelector('#input-range').addEventListener('change', (ev)=>{
    const val = ev.target.value;


    // style sheet는 각자 형편에 맞는걸로
    const styleSheet = document.styleSheets[0];
    const selector = '#input-range::-webkit-slider-runnable-track';
    const styleTxt = `{background-image: linear-gradient(to-right, rgba(0,0,255,1), rgba(255,0,0,1) ${val)%, transparent 0%)}`;


    styleSheet.insertRule(`${selector} ${styleTxt}`, styleSheet.cssRules.length);
  });

 

[참고]

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule