[jQuery] jQuery 스타일(style CSS) 다루기

jQuery 스타일 속성 값 얻기

만약 body가 위와 같이 구성되어 있는 경우 table 스타일의 border 값을 얻기 위해서는 jQuery의 css() 메서드를 사용합니다.

<script>                                                                                 
    $(document).ready(function () { 
        var border = $('table').css('border'); 
        console.log(border); //1px solid rgb(255, 0, 0)
    });
</script> 

*RGB는 순서대로 Red, Green, Blue 를 의미하며 0 ~ 255 까지 값으로 표현합니다.

jQuery 스타일 속성 추가 및 수정하기

만약 span 요소에 font-size 값을 30px로 추가하고 싶으면 css(속성명, 속성값)을 이용할 수 있습니다. 만약 기존에 font-size 속성값이 존재한다면 새로 지정한 값으로 수정됩니다.

<script>                                                                                 
    $(document).ready(function () { 
        $('span').css('font-size', '30px'); 
    });
</script> 

font-size 스타일이 적용된 모습입니다.

jQuery 스타일 속성 여러개 동시에 다루기

만약 css() 메서드를 통해 동시에 여러개의 스타일 속성을 변경하고 싶은 경우에는 css(객체) 형태로 메서드 사용이 가능합니다. 객체로는 style 속성을 key로 가진 JSON 객체를 넘겨주면 됩니다.

<script>                                                                                 
    $(document).ready(function () { 
        var styleObj = { 
            'font-size': '30px', 
            'color': 'blue' 
        };
 
 
        $('span').css(styleObj); 
    });
</script> 

스타일이 적용 되었습니다.