.addClass()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

addClass 메소드는 요소에 클래스를 추가합니다.

+_+
예제 1
간단한 예제1
보기
제이쿼리 공작소 !!
소스
<style type="text/css">
    .css_test {
        text-align : center;
        margin-top : 10px;
    }
    .css_test.bold_text {
        font-weight : bold;
    }
    .css_test.blue_color {
        color : blue;
    }
    .css_test.big_text {
        font-size : 30pt !important;
    }
</style>

<button type="button" onclick="$('.css_test').addClass('bold_text')">클래스 적용1</button>
<button type="button" onclick="$('.css_test').addClass('blue_color')">클래스 적용2</button>
<button type="button" onclick="$('.css_test').addClass('big_text')">클래스 적용3</button>

<div class="css_test">
    제이쿼리 공작소 !!
</div>
관련 CSS
jQuery

addClass( '클래스이름' )
addClass( 'bold_text' )

예제 2
간단한 예제2
보기
아래 버튼을 눌러서 클래스를 적용해 보세요. ^^
소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test .border_radius {
        border-radius : 50px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 10px black;
    }
    .css_test .border {
        border : 5px solid #444;
    }
    .css_test .padding {
        padding : 10px;
    }
</style>

아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="http://cfile2.uf.tistory.com/image/2604833354D74FB40E65BC" />
</div>
관련 CSS
예제 3
여러 이미지에 동시 적용
보기
아래 버튼을 눌러서 클래스를 적용해 보세요. ^^

소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test img {
        margin-top : 5px;
        width : 160px;
    }
    .css_test .border_radius {
        border-radius : 30px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 5px black;
    }
    .css_test .border {
        border : 3px solid #444;
    }
    .css_test .padding {
        padding : 3px;
    }
</style>

아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="http://cfile8.uf.tistory.com/image/2644533854D74C4E26BCC0" />
    <img src="http://cfile27.uf.tistory.com/image/27239438550B92392ABD68" />
    <img src="http://cfile27.uf.tistory.com/image/27239438550B92392ABD68" /><br>
    <img src="http://cfile5.uf.tistory.com/image/27042F3354D74FB30A489A" />
    <img src="http://cfile5.uf.tistory.com/image/27042F3354D74FB30A489A" />
    <img src="http://cfile6.uf.tistory.com/image/2129E34854D73514041487" />
</div>
관련 CSS
jQuery

$( '.css_test img' ).addClass( 'border_radius' )

- 제이쿼리의 편리함을 잘 보여줍니다. ^^; 

+ 관련 jQuery +
jQuery 홈페이지 .addClass() API 문서 : https://api.jquery.com/addclass/