JQuery STEP 4 - JQuery CSS

★ jQuery CSS

• css 조작

//- css('속성')     > getter
//- css('속성', 값) > setter

• 색상 확인

//DOM 방식
alert(getComputedStyle(document.getElementById('box')).getPropertyValue('background-color'));

//JQuery 방식
alert($('#box').css('background-color'));

• 다중 값을 주었을 경우

//방법 1
$('#box')
    .css('color', 'blue')
    .css('background-color', 'gold')
    .css('width', 300)
    .css('height', 100);
    
//방법 2
$('#box').css({
    color : 'tomato',
    'background-color' : 'conflowerblue',
    width : 100,
    height : 300
});

• style css를 이용하여 한 경우

<style>

    .box .one {
        background-color: darkgoldenrod;
    }

    .two {
        font-size: 5rem;
    }

</style>

<script>
$('#box').addClass('one');
$('#box').addClass('two');
$('#box').removeClass('two');
$('#box').toggleClass('two');
</script>