[J] JavaScript & jQuery 공부하기 #27

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

32. 스타일 조작
 * css() 메소드
  - 선택된 요소의 스타일을 조작한다
    기본 상태 : < p>hello world!< /p>
    메소드 사용 : $("p").css("color","blue");
    결과 : < p style="color:blue">Hello world!< /p>

 * addClass()와 removeClass() 메소드
  - 선택자에 의해 선택된 요소에 클래스 스타일을 추가하거나
    제거할 수 있다

    기본상태 : < p>hello world!< /p>
    스타일지정 : .red{color : red}
    메소드사용 : $("p").addClass("red");
    결과 : < p class="red">hello world!< /p>

 * css() 메소드 이용 스타일 조작
  - css()를 적용할 요소들과 이벤트를 발생시킬 버튼을 생성함

    < body>
      < p style = "background-color:red">빨간색 배경요소</ p>
      < p style = "background-color:orange">주황색 배경요소</ p>
      < p style = "background-color:yellow">노란색 배경요소</ p>
      < p>배경요소 없음</ p>
      < button>배경색 변경</ button>
    </ body>

  - 버튼 클릭 이벤트가 발생하면 css() 메소드를 이용해 p 태그 영역의 배경을
    보라색으로 변경하는 스크립트 생성

    < script type="text/javascript">
      $(document).ready(function(){
        $("button").click(function(){
          $("p").css("background-color","purple");
        });
      });
    </ script>

 * addClass()와 removeClass()이용 스타일 조작
  - 메소드를 적용할 요소들과 이벤트 처리할 버튼들을 생성

    < body>
      < div id="div1">스타일을 적용할 텍스트</ div>
      < div id="div2">스타일을 비교할 텍스트</ div>
      < br>
      < button id="btn1">스타일 적용하기</ button>
      < button id="btn2">스타일 제거하기</ button>
    </ body>

 - 적용할 스타일을 클래스 연산자를 이용하여 정의함

    < style type="text/css">
      .important {font-weight:bold; font-size:20px;}
      .blue {color:blue;}
    </ style>

 - 버튼을 클릭하면 addClass()와 removeClass() 메소드를 정의해
   important와 blue로 정의된 스타일을 적용함

   < script type="text/javascript">
     $(document).ready(function(){
      $("#btn1").click(function(){
        $("#div1").addClass("important blue");
      });
      $("#btn2").click(function(){
        $("#div1").removeClass("important blue");
      });
     });
   </ script>

 * 예제

 < script type="text/javascript">
   $(document).ready(function(){
    $("button").click(function(){
      $("h1,h2,p").toggleClass("blue");
      $("div").toggleClass("large bg_yellow blue");
    });
   });
 </ script>

 < style type="text/css">
  .large {font-size:20px}
  .bg_yellow {background-color:yellow;}
  .blue {color:blue}
 </ style>

 < body>
   < h1>1</ h1>
   < h2>2</ h2>
   < p>33</ p>
   < div>This is some important text!</ div>
   < button>Set styles</ button>
 </ body>