[Task] 최소화 상태의 검색바에서 가상선택자 스타일 없애기

 

호버 효과를 구현하기 위해서 처음에는 :hover::before 가상선택자를 활용해서 이를 구현했었다. 하지만 검색바가 최소화된 상태에서는 호버 효과가 작동되지 않아야 한다. 따라서 처음에는 JS로 CSS에 지정한 가상선택자를 수정할 수 있는 방법을 찾아보았다.

 

1. getComputedStyle 사용

// before 가상 선택자의 스타일 가져오기
const beforeStyle = window.getComputedStyle(inputDiv, '::before');

// 가상 선택자의 content 속성 값 출력
console.log(beforeStyle.content);

getComputedStyle이라는 함수가 있지만, 이 함수는 read-only 설정이 되어 있는 DOM을 불러오는 것이라 수정이 불가능했다.

2. 동적으로 style 태그 수정

searchInputList.forEach((inputDiv) => {
    // hover 스타일링 제거
    inputDiv.addEventListener('mouseover', () => {
        if (isScrolled === true) {
            rootBeforeStyle.innerHTML = `.search-bar-input:hover::before {
                display: none;
            }`
        } else {
            rootBeforeStyle.innerHTML = `.search-bar-input:hover::before {
                display: block;
            }`
        }
        console.log(rootBeforeStyle);
        document.head.appendChild(rootBeforeStyle);
    })
})

style태그를 생성하여 innerHTML로 before 스타일을 변경해주려 했지만 어째서인지 스타일이 변경되지 않았다.

 

위와 같은 방법으로는 목표 기능을 구현할 수 없었다. 그러던 중 JS가 제어할 수 없는 가상선택자가 아닌, div를 활용해서 구현해야겠다는 생각이 문득 들었다. div를 활용하면 JS에서 선택할 수 있을 뿐더러, 이전에 개발했던 최소화 기능에서 label을 제외한 모든 요소를 display: none; 스타일을 주도록 구현했었다. 이것이 div도 받을 수 있도록 input div 안에 넣으면 굳이 최소화 되었을 때 스타일을 수정하지 않아도 된다.

                <div id="place-input" class="search-bar-input ">
                    ...
                    <div class="place-input-hover"></div>
                </div>
                <div id="check-in-input" class="search-bar-input">
					...
                    <div class="check-in-input-hover"></div>
                </div>
                <div id="check-out-input" class="search-bar-input">
					...
                    <div class="check-in-input-hover"></div>
                </div>
                <div id="guest-input" class="search-bar-input">
					...
                    <div class="guest-input-hover"></div>
                </div>

 

다음과 같이 호버 스타일을 받을 디브를 생성해주고 scss에서 선택자를 활용해 div를 선택하여 기능을 구현했다.