어디서 설정했는지 모르는 element.style이 어디선가 적용되어서 CSS가 이상해지는 현상이 예전에도 몇번 있었는데, 그때는 그냥 프로젝트를 하다보니, 시간에 쫒겨서 그냥 !important 속성을 줘서 해결하고 넘어갔었다. 이번에 시간이 조금 남는 겸 한번 정리해봄.. element.style이란? element.style CSS 선택자보다 더 높은 특이성 값을 가진 요소의 인라인 스타일을 나타내는 브라우저 개발도구의 일부 - 참조링크 element.style을 주는방식은 다음과 같이 크게 2가지 방식이 있다. 인라인 방식으로 직접 태그에 style을 주는 방법 인라인 방식 샘플 스타일 테스트 javascript 문법을 활용하여 태그에 style속성을 추가 javascript문법을 활용하여 sty..

개발을 하다보면 그럴 때가 있다. css를 동적으로 주기 위해서 javascript의 함수를 사용하여 특정 태그에 스타일을 주는 경우.. 근데 보통 개발자들은 javascript로 스타일을 주지마라~ 이런 말을 한다. 편리한데 말이다. 특정 이벤트가 발생했을 때 그냥 스타일을 추가했다가 제거할 수도 있고 얼마나 편리한가? 동적으로 특정태그에 스타일 추가하는 샘플 코드 테스터 예를 들면 위와 같은 setStyle이라는 함수가 있다고 생각해보자. setStyle이라는 함수를 호출하면 동적으로 해당 태그에 color : "red"라는 스타일이 인라인 방식으로 추가되고 element.style에 추가된다. 결과화면 보면 알겠지만, 분명 위의 코드에서는 인라인방식으로 스타일 속성을 주지 않았는데, 실제 DOM을 ..