jQuery로 CSS 조작

읽기

1. obj.css('attr')

 

쓰기

2. obj.css('attr', 'value')

3. obj.css('attr', 'value')
         .css('attr', 'value')
         .css('attr', 'value')

4. obj.css({
                attr: value,
                attr: value,
                attr: value
            })
5. obj.addClass('class')

 

지우기

 

 

1. css(속성) : 읽기

2. css(속성, 값) : 쓰기

 

 

하나로 통일하여 인자값으로 읽기, 쓰기를 적용한다.

코드 양이 적어 생산성이 높다.

 

읽기

            //자바스크립트로 css 조작할 때 inline style sheet를 사용했다.
            // alert(document.getElementById('box').style.color);
            // alert(getComputedStyle(document.getElementById('box')).getPropertyValue('color'));

            // alert($('#box').css('color'));

 

쓰기

$('#box').css('color', 'blue');

 

            $('#box')
                .css('color', 'blue')
                .css('fontWeight', 'bold')
                .css('font-size', '3rem');

 

객체로 접근이 가능하다

            $('#box').css({
                color: 'blue',
                backgroundColor : 'gold',
                'font-size': '3rem'
            });