vanila.js로 스타벅스 페이지 클론을 하고 있었다.
<li class="search">
<input type="text"/>
<div class="material-icons search-icon">search</div>
</li>.search{
...
input{
display: none;
padding: 0.2rem;
...
}
}input은 display: none으로 숨기다가 search를 클릭하면 input 필드와 search icon을 나란히 표시하려했다.
js를 아래같이 작성했다.
const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input');
searchEl.addEventListener('click',function(){
if (searchInputEl.style.display === 'none') {
searchInputEl.style.display = 'block';
searchInputEl.focus();
}
});그런데 아무리 search 영역을 클릭해도 input이 추가되지 않았다...
콘솔에 찍어보니
searchInputEl.style.display가 빈 값이었다.
인라인 스타일(JavaScript에서 element.style로 설정된 스타일, HTML의 style 속성에 직접 지정된 스타일)은 인라인 스타일만 포함한다.
인라인 스타일로 설정된 값만 js에서 element.style.~을 통해 확인할 수 있는 것이다.
CSS 파일이나 <style> 태그에서 설정된 스타일은 인라인 스타일이 아니므로 확인할 수 없다.
내 상황에선 input 태그가 CSS에 의해 display: none 상태이므로 JavaScript에서 element.style.display를 확인해도 값이 나오지 않았다.
window.onload = function() {
searchInputEl.style.display = 'none';
};이렇게 인라인 스타일을 추가했더니
원하는 대로 동작했다.
그럼 css에 지정한 스타일을 js에서 쓰고 싶으면?
window.getComputedStyle()
let style = window.getComputedStyle(element[, pseudoElt]);이 메소드는 인자로 전달받은 요소의 모든 스타일(CSS, 인라인 스타일, 브라우저 기본 스타일)을 결합해 최종적으로 적용된 값을 담은 객체를 반환한다.
pseudoElt는 optional 인자이고
일치시킬 의사요소(pseudo element)를 지정하는 문자열이다. 보통의 요소들에 대해서는 생략되거나 null이어야 한다.
반환값은 요소의 스타일이 변경 될 때 자동으로 업데이트되는 읽기 전용 CSSStyleDeclaration 객체이다.
window.getComputedStyle(searchInputEl).display 이런식으로 js에서 원하는 속성을 쓸 수 있다.
searchEl.addEventListener('click',function(){
const computedStyle = window.getComputedStyle(searchInputEl);
console.log(`computedStyle.display: ${computedStyle.display}`);
console.log(`computedStyle.getPropertyValue("display"): ${computedStyle.getPropertyValue("display")}`);
if (computedStyle.display === 'none') {
searchInputEl.style.display = 'block';
searchInputEl.focus();
}
});
::after, ::before, ::marker, ::line-marker 같은 의사 요소를 두번째 인자로 넣어 사용할 수도 있다.
<style>
h3::after {
content: " rocks!";
}
</style>
<h3>generated content</h3>
<script>
var h3 = document.querySelector("h3");
var result = getComputedStyle(h3, ":after").content;
console.log("the generated content is: ", result); //' rocks!'
</script>
정확한 스타일 상태를 확인하고 싶으면 window.getComputedStyle()로 CSS나 인라인 스타일 구분 없이 최종 적용된 스타일을 확인해야한다.
참고자료
