[JavaScript] 자바스크립트로 CSS 추가하기

자바스크립트를 이용해서 HTML 특정 요소의 스타일을 바꾸는 방법이 있다.
순수 자바스크립트보다는 jQuery를 이용하면 매우 간편하다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="test">test</div>
<script>
  $(function(){
    $("#test").css({
      "color": "blue",
      "font-size": "25px"
    });
  });
</script>

 

위 방식은 그냥 html 태그에 스타일을 추가하는 방식이다.

저 방식보다는 CSS에 미리 클래스에 대한 스타일을 정의해두고 그 클래스를 부여하는게 좋을 수도 있다.

 

이제 알아볼 방법은 이 CSS를 편집해버리는 그런 개념이다.

보통 페이지에 보면 .css 파일이 하나 정도는 포함되어 있는데 이게 아예 없을 경우도 고려하여 새롭게 스타일시트를 추가하는 방식을 택했다.

<div id="test2">test2</div>
<script>
  document.head.appendChild(document.createElement("style"));
  var styleSheets = document.styleSheets;
  styleSheets[styleSheets.length-1].addRule("#test2", "color: red;font-size: 25px;");
</script>

 

head 태그 안에 style 태그를 추가하고 거기에 addRule로 새로운 규칙을 추가하는 개념으로 보인다.

동적으로 스타일을 바꿀 경우가 있으면 유용해 보인다.