jQuery 공작소 : .css()

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

css 메서드는 CSS 속성값을 읽어오거나 지정합니다.

예제 1
기본예제 - css 적용해 보기
보기
버튼을 눌러서 css 를 적용해 보세요!

jQuery 공작소
소스
<style type="text/css">
    .css_test {
        text-align : center;
        margin-top : 20px;
    }
</style>

버튼을 눌러서 css 를 적용해 보세요!<br><br>
<button type="button" onclick="$('.css_test').css('font-weight', 'bold')">font-weight : bold</button>
<button type="button" onclick="$('.css_test').css('color', 'blue')">color : blue</button>
<button type="button" onclick="$('.css_test').css('font-size', '20pt')">font-size : 20pt</button>

<div class="css_test">
    jQuery 공작소
</div>
관련 CSS
margin-toptext-align
jQuery
css( 'CSS 속성명' , '속성값' )
css( 'font-weight' , 'bold' )  -  CSS font-weight 의 bold 속성값 적용
css( color , 'blue' )  -  CSS color 의 blue 속성값 적용
css( 'font-size' , '20pt' )  -  CSS font-size 의 20pt 속성값 적용

- (대쉬) 가 들어간 속성 이름은 문자열로 처리해 주어야 합니다.
css( font-weight , 'bold' ) 는 안되구요 css( 'font-weight' , 'bold' ) 는 됩니다.
예제 2
기본예제 - 객체형태로 속성 설정하여 CSS 동시 적용하기
보기
버튼을 눌러서 css 를 적용해 보세요!

jQuery 공작소
소스
<style type="text/css">
    .css_test {
        text-align : center;
        margin-top : 20px;
    }
</style>

버튼을 눌러서 css 를 적용해 보세요!<br><br>
<button type="button" onclick="j_test()">한번에 여러개 동시 적용</button>

<div class="css_test">
    jQuery 공작소
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test').css({
            'font-weight' : 'bold',
            'color' : 'blue',
            'font-size' : '20pt'
        });
    }
</script>
관련 CSS
margin-toptext-align
jQuery

- 객체 형태로 속성 지정하기

css( {
        'font-weight' : 'bold' ,
        'color' : 'blue' ,
        'font-size' : '20pt'
} );

예제 3
이미지에 CSS 적용해 보기
보기
버튼을 눌러서 이미지를 보기좋게 바꿔보세요!

소스
<style type="text/css">
    .css_test {
        text-align : center;
        margin-top : 20px;
    }
</style>

버튼을 눌러서 이미지를 보기좋게 바꿔보세요!<br><br>
<button type="button" onclick="$('.css_test img').css('border-radius', '15px')">모서리 다듬기</button>
<button type="button" onclick="$('.css_test img').css('box-shadow', '5px 5px 10px gray')">그림자 만들기</button>
<button type="button" onclick="$('.css_test img').css('border', '2px solid #555')">테두리 만들기</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2312D43D552F509B25" />
</div>
관련 CSS
margin-toptext-align
예제 4
이미지에 적용된 CSS 속성값 보기
보기
버튼을 눌러서 CSS 속성값을 보세요!

소스
<style type="text/css">
    .css_test img {
        border-radius : 15px;
        border : 2px solid #555;
        box-shadow : 5px 5px 10px gray;
        margin-top : 20px;
        text-align : center;
    }
</style>

버튼을 눌러서 CSS 속성값을 보세요!<br><br>
<button type="button" onclick="j_test('border-radius')">border-radius</button>
<button type="button" onclick="j_test('box-shadow')">box-shadow</button>
<button type="button" onclick="j_test('border')">border</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C" />
</div>

<script type="text/javascript">
    function j_test(css){
        alert($('.css_test img').css(css));
    }
</script>
관련 CSS
borderborder-radiusbox-shadowmargin-toptext-align
jQuery

- 속성값 읽어오기
- 컬러 설정은 rgb(0, 0 ,0) 형태의 값으로 읽어옵니다.

css( 속성명 )  -  해당 속성의 값을 읽어옵니다.
css( 'border-radius' )  -  border-radius 속성값 읽어오기

jQuery 홈페이지 .css() API 문서 : https://api.jquery.com/css/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소