스타일시트(CSS), 스크립트(Script) 동적으로 추가/제거하기

CSS

사이트의 기능에 따라 스타일만을 변경해야 할 필요가 있다. 

이 때 link 태그를 사용하는데 이 태그도 DOM 엘리먼트와 마찬가지로 아이디나 클래스를 적용할 수 있다.

<!-- 
  link 키워드로 시작하는 스타일시트 태그에도 id와 클래스를 지정할 수 있다.
  주의할 점은 처음 로드할 필요가 없는 스타일시트에는 disabled를 반드시 표기하여야 한다는 점이다.
 -->
<link rel="stylesheet" class="theme" id="blue" href="/style/blue.css">
<link rel="stylesheet" class="theme" id="red" disabled="disabled" href="/style/red.css">

이렇게 적용한 아이디나 클래스는 DOM 엘리먼트처럼 동적으로 조작이 가능하다. 

스타일시트를 조작하면 브라우저는 이미 그려졌던 스타일을 다시 그려내기 시작한다. 이 기능은 익스플로러7 버전 이후의 모든 브라우저가 지원한다.

<script>
  // 모든 테마를 비활성화 한 후 red 테마만 활성화
  $("link.theme").prop('disabled', true);
  $("link#red").prop('disabled', false);
</script>

JQuery로 비활성화

Script

재미있는 점은 script 태그 역시 클래스나 아이디를 설정하여 선택할 수 있다는 점이다. 

하지만 태그 엘리먼트를 비활성화, 혹은 제거하더라도 이미 선언된 함수나 변수에는 영향이 없다. 이미 브라우저의 Context에 선언되었기 때문이다.

<script id="script1">
  function say() {
    console.log("yeah");
  }
</script>

<script>
  let script1 = $("script#script1");
  if (script1) {
    console.log('find!'); // find! 출력됨
  }
  script1.empty();
  script1.prop('disabled', true);

  say(); // yeah 출력됨

  console.log(script1.text()); // "" 출력됨
</script>

script에 아이디를 설정하고 테스트하는 예제

이미 선언된 스크립트를 제거하고자 한다면 직접 변수를 재정의하고, 이벤트를 언바인드 하는 등의 고통스런 과정이 필요하다.

때문에 교체해야 할 필요가 있는 함수라면 작성할 때 객체로 관리하고, 이벤트를 언바인딩 하기 위한 함수등을 고려해야 한다.