web/vanilla javascript
javascript로 css의 가상요소 ::after ::before 바꾸기
Trip the light
2023. 5. 15. 06:30
HTML CODE
<!-- ::after를 수정할 html element -->
<div id="root"></div>
JAVASCRIPT CODE
// ::after를 입력할 style element를 만듭니다.
let rootAfterStyle = document.createElement("style");
// 원하는 ::after style을 작용합니다.
rootAfterStyle.innerHTML = `#root::after {
content: '';
z-index: 3;
height: 6px;
}`;
// <head> tag에 넣습니다.
document.head.appendChild(rootAfterStyle);
// 이 후에 ::after style 수정이 가능합니다.
rootAfterStyle.innerHTML = rootAfterStyle.innerHTML.replace(
/height: [0-9]+px/,
"height: 12px"
);
결과 화면
javascript를 사용해서 css의 가상요소 ::after를 바꾸려면, 위와 같이 html header에 inline 방식으로 심어주어야 합니다.