• Q&A
  • 회원가입
  • 로그인

[HTML_CSS] JQ - addClass() , removeClass() , toggleClass() , css() 메서드 - (클래스추가 / 클래스제거 / CSS스타일추가) 메서드

703  

목차

 

addClass ()
선택요소에 하나 이상의 클래스 추가.

 

removeClass ()
선택요소에서 하나 이상의 클래스 제거.


addClass () + setTimeout() + removeClass ()
추가한 클래스 자동 제거.

 

toggleClass ()
선택요소에서 클래스 '추가/제거'를 토글.

 

css()
스타일 속성을 설정/반환.

 

hasClass()
지정 클래스 갖는지 여부 체크.

 

 

addClass() - 선택한 요소에 하나 이상의 클래스 추가.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("h1, h2, p").addClass("pink");

        $("div").addClass("pink emphasis");

    });

});

</script>

<style>

.emphasis { font-weight: bold; font-size: xx-large;}

.pink {color: #f70542;}

</style>


<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<p>웹제작 기초 무료 학습 사이트</p>

<p>HTML, CSS. JS, jQuery, PHP, SQL</p>

<div>지금 바로 가입하기</div><br>

<button>요소에 class 추가</button>


결과 보기

 

removeClass() - 선택한 요소에서 하나 이상의 클래스 제거.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("h1, h2, p").removeClass("pink"); 

        $("div").removeClass("pink emphasis");

    });

});

</script>

<style>

.emphasis {font-weight: bold; font-size: xx-large;}

.pink {color: #f70542;}

</style>


<h1 class="pink">홈짱닷컴</h1>

<h2 class="pink">Homzzang.com</h2>

<p class="pink">웹제작 기초 무료 학습 사이트</p>

<div class="pink emphasis">HTML, CSS. JS, jQuery, PHP, SQL</div>

<button>class 제거하기</button>


결과 보기

 

addClass() + removeClass() 콜백함수 결합 = 추가한 클래스 일정 시간 후 자동제거.

 

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>일정시간 후 추가한 클래스 제거</title>

<style>

.hz { width: 500px; height: 200px; position: relative; }

#button { padding: .5em 1em; text-decoration: none; }

#homzzang { width: 240px;  padding: 1em; border: 1px solid #000; background: #eee; color: #333; }

    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; color: red !important;}

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$( function() {

    $( "#button" ).on( "click", function() {

      $( "#homzzang" ).addClass( "newClass", 1000, callback );

});

 

function callback() {

    setTimeout(function() {

        $( "#homzzang" ).removeClass( "newClass" );

      }, 1500 );

    }

} );

</script>

 

<div class="hz">

  <div id="homzzang">

      홈짱닷컴 Homzzang.com

  </div>

</div>

<button id="button">효과 보기</button> 


결과보기

 

toggleClass() - 선택한 요소에서 클래스 추가 / 제거 토글

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("h1, h2, p").toggleClass("pink");

        $("div").toggleClass("pink emphasis");

    });

});

</script>

<style>

.emphasis {font-weight: bold;  font-size: xx-large;}

.pink { color: #f70542;}

</style>


<h1 class="pink">홈짱닷컴</h1>

<h2 class="pink">Homzzang.com</h2>

<p class="pink">웹제작 기초 무료 학습 사이트</p>

<div class="pink emphasis">HTML, CSS. JS, jQuery, PHP, SQL</div>

<button>class 추가/제거</button>

 

결과 보기

 

css() - 스타일 속성을 설정/반환.

 

https://homzzang.com/b/jquery-30

 



찾아주셔서 감사합니다. Since 2012