[ HTML TEST Page]

++++++++++++++



const box = document.querySelector(".box") const button = document.querySelector("button") button.addEventListener("click", () => { box.classList.toggle("toggle") }) .box{ width: 100px; height: 100px; background: red; margin-bottom: 10px; transition: 0.5s } .box.toggle{ width: 200px; }

++++++++++++++

상자

const box = document.querySelector(".box"); box.style.borderColor; HTML에서 특정 태그의 스타일 속성을 가져오는 방법은 위와 같이 해당 태그의 요소를 얻어와 변수에 담고, ex) const box = document.querySelector(".box"); 변수이름.style.스타일속성 ex) box.style.borderColor; ex) box.style.width; ex) box.style.height; 등등 이렇게 선언하면 손쉽게 해당 태그의 스타일 속성을 얻어올 수 있다. 하지만 팝업창에서는 이 방법이 통하지 않는다. 검색을 해보니 저 위의 방법은 인라인 스타일만 조회할 수 있는 코드란다. (그럼 왜 그 동안 됐던 건데?) 그간 HTML에서 외부 css 파일 링크를 걸어서 했을 때는 저 코드가 작동했지만 팝업창에서는 작동하지 않은 이유는 정확하진 않지만 이리저리 검색해본 결과 스타일 시트 로딩 시점과 브라우저의 캐싱 동작의 차이 문제일거란다. 어쨌든 기존 HTML에서는 저 위의 방법으로 특정 태그의 스타일을 문제 없이 조회할 수 있지만 팝업창에서는 HTML 내부에서 인라인 스타일과 스타일 시트, 즉