어디서 설정했는지 모르는 element.style이 어디선가 적용되어서 CSS가 이상해지는 현상이 예전에도 몇번 있었는데,
그때는 그냥 프로젝트를 하다보니, 시간에 쫒겨서 그냥 !important 속성을 줘서 해결하고 넘어갔었다.
이번에 시간이 조금 남는 겸 한번 정리해봄..
element.style이란?
element.style CSS 선택자보다 더 높은 특이성 값을 가진 요소의 인라인 스타일을 나타내는 브라우저 개발도구의 일부
- 참조링크
element.style을 주는방식은 다음과 같이 크게 2가지 방식이 있다.
인라인 방식으로 직접 태그에 style을 주는 방법
인라인 방식 샘플
<div style="color : red;">스타일 테스트</div>
javascript 문법을 활용하여 태그에 style속성을 추가
javascript문법을 활용하여 style추가
document.querySelector('#L_p04').style.color = "red";
인라인 방식이라면 그냥 해당 태그를 가면 손쉽게 찾을 수 있지만, 문제는 js에서 줬을 때이다..
속성값을 하드코딩 했다면 찾기 쉽겠지만, 함수를 써서 속성값을 줬다면 이게 또 찾기 힘들어진다.
우선 다음과 같은 곳을 찾아보도록 하자.
1) 해당 태그에 인라인 방식으로 css를 줬는가?
2) js파일에서 style을 추가 해주었는가?
그래서 디버깅을 해보니, 제이쿼리를 통해 어떤함수를 호출할 때 css속성이 element.style에 추가되는 것을 발견
그래서 구글링을 해보니, 제이쿼리나 javascript에서 해당 값을 줬을 수도 있으니 잘 찾아보라는 이야기뿐..
근데 아까도 말했듯이 찾기 힘듦.. 그래서 오늘은 난 도저히 못찾겠다. 그냥 element.style을 수정하겠다 할 때
element.style을 수정하는 방법을 정리해보려 한다.
element.style 수정방법
해당 element.style을 주는 곳을 찾는 게 맞지만, 어쩔 수 없는 경우 아래와 같은 방식으로
element.style을 수정할 수 있다.
!important 속성
#선택자 { color:red !important;}css를 줄 때 !important 속성을 주어서, 해당 css속성의 우선순위를 가장 높게 잡아준다.
( !important를 너무 남발하지는 말자.. 나중에 css를 변경했는데, 왜 안돼지.. 하고 벙 찌는 상황이 생길지도.. )
javascript를 통해 element.style 제거
document.querySelector('#선택자').removeAttribute('style');querySelector함수를 통해 선택자로 가져온 태그의 style속성을 아예 없애버린다.
특정 css속성만 제거하고 싶다면 아래와 같이 해도 된다.
document.querySelector([선택자]).style.removeProperty([]);
결론
가장 베스트한 정답은 해당 element.style을 주는 곳을 찾는 것이고
도저히 못찾겠으면 element.style을 수정할 수 있다.
( 나중에 알게 된 사실인데, 처음 보는 js에서 해당 값을 함수를 통해서 주더라.. 디버깅을 꼼꼼히 하도록 하자.. )
