HTML, JavaScript, jQuery : CSS(스타일 시트)간 전환 방법 : 예제, 구현

HTML, JavaScript, jQuery : CSS(스타일 시트)간 전환 방법 : 예제, 구현

 

Jquery를 사용하면 DOM을 매우 쉽게 조작 할 수 있으므로 웹 페이지의 모든 엘리먼트를 ​​쉽게 변경할 수 있습니다. 이러한 엘리먼트 중 하나는 스타일 시트에 대한 참조이므로 jQuery를 사용하면 다른 스타일 시트간 쉽게 전환 할 수 있습니다. 그러나 왜 다른 스타일 시트로 전환해야하나요?

가장 일반적인 스타일 시트 중 하나를 스타일 시트 간에 전환해야하는 이유는 여러 가지가 있습니다. 많은 웹 사이트에서 사용자가 페이지에 표시되는 글꼴 크기를 선택할 수 있지만 글꼴 크기를 변경하면 레이아웃이 확장되어 웹 사이트가 더 이상 동일하게 보이지 않습니다. 서체 크기에 따라 다른 스타일 시트를 할당하여 웹 사이트가 항상 좋아 보이고 서체 크기로 중요하지 않은지 확인할 수 있습니다.

색상이 많은 웹 사이트가 있고 방문자가 일반 흑백 페이지를 선호하는 경우 흑백 페이지를 위한 스타일 시트를 가질 수 있습니다. 스타일 시트로 재미를 느끼고 동일한 DOM 요소를 사용하여 웹 사이트의 모양을 완전히 변경하고 방문자가 사용하는 레이아웃을 선택할 수 있습니다.

스타일 시트를 변경하는 것만으로도 많은 작업을 수행 할 수 있으므로 jQuery를 사용하여 스타일 시트를 빠르고 쉽게 변경할 수있는 방법을 보여 드리겠습니다. 데모 페이지에서 버튼을 클릭하기만하면 4 개의 다른 스타일 시트 사이를 전환 할 수 있으며 스타일 시트는 페이지의 배경색만 변경합니다. 

 

 

 

HTML 코드

페이지의 HTML은 간단합니다. 스타일 시트 링크와 id가있는 4 개의 div가 있으며 사용할 스타일 시트를 참조하십시오.

<link rel="stylesheet" id="switch_style" href="">

<p>Use jQuery to easily change the stylesheet of your page.</p>

<p>Let your visitors choose your website styling.</p>

<h4>Pick one of the boxes below to change the stylesheet.</h4>

<p>The stylesheet has one property that is the change the body background colour.</p>

<div class="box" id="green"></div>

<div class="box" id="red"></div>

<div class="box" id="blue"></div>

<div class="box" id="yellow"></div>

 

 

 

JQuery 코드

이제 jQuery를 사용하여 switch_style 요소의 href를 변경합니다. 먼저 페이지가 로드 될 때 실행되는 on ready 기능을 설정하면 상자의 클릭 이벤트를 설정하는 switch_style_click 기능이 실행됩니다. 모든 상자에 클래스를 설정했으므로 이를 사용하여 클래스 상자가 있는 각 요소에 클릭 이벤트를 할당 할 수 있습니다. attr 함수를 사용하여 상자의 ID를 가져 와서 변수에 저장하기 만하면 됩니다. 이제 switch_style 요소에서 attr 함수를 다시 사용하여 href를 새로운 CSS 파일로 변경합니다. 아래 코드를 복사하여 JavaScript 파일에 붙여 넣습니다.

 

(function ($j) {

  switch_style = {

    onReady: function () {      
      this.switch_style_click();
    },

    switch_style_click: function(){
        $(".box").click(function(){
            var id = $(this).attr("id");

            $("#switch_style").attr("href", id + ".css");           
        });
    },
  };

  $j().ready(function () {
      switch_style.onReady();
  });

})(jQuery);