[jQuery] 요소의 스타일 변경

요소의 스타일 변경

1. 방법

1) 기본

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#spring').css('background-color','green'); }); </script>

- css() 속성을 사용하여 변경한다

2) 해시 형식으로 여러 프로퍼티 지정

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#spring').css({ backgroundColor: 'green', color:'red', fontWeight:'bold' }); }); </script>  

3) 수치 프로퍼티로 상대값 설정

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> <button id="btn">button</button> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#btn').click(function(){ $('#spring').css('font-size','+=10'); }); </script>  

- +=10, -=10 으로 늘리거나 감소 시킬 수 있다