📖
CSS 변수 (--custom-color) 사용하여 가상 요소의 스타일을 동적으로 변경
페이지 정보
본문
가상 요소의 스타일을 동적으로 변경하려면 CSS 변수 (--custom-color) 를 사용하는 방법이 유용합니다.
🔹 CSS (예제)[code].iframe-lightbox .btn-close::before,
.iframe-lightbox .btn-close::after {
background-color: var(--btn-close-color, red); /* 기본값 red */
}[/code]
🔹 JavaScript에서 변경[code]let btnClose = document.querySelector(".iframe-lightbox .btn-close");
btnClose.style.setProperty("--btn-close-color", "blue");[/code]이렇게 하면 ::before 및 ::after 가상 요소의 background-color가 동적으로 변경됩니다!
🔹 CSS (예제)[code].iframe-lightbox .btn-close::before,
.iframe-lightbox .btn-close::after {
background-color: var(--btn-close-color, red); /* 기본값 red */
}[/code]
🔹 JavaScript에서 변경[code]let btnClose = document.querySelector(".iframe-lightbox .btn-close");
btnClose.style.setProperty("--btn-close-color", "blue");[/code]이렇게 하면 ::before 및 ::after 가상 요소의 background-color가 동적으로 변경됩니다!
댓글목록
등록된 댓글이 없습니다.
  |