jQuery - Get and Set CSS Classes
jQuery에서, CSS 요소를 조작하는 것은 쉽습니다.
1. jQuery Manipulating CSS
jQuery는 CSS 조작을 위해서 몇 가지 메소드를 가지고 있습니다.
- addClass()
- removeClass()
- toggleClass()
- css()
2. Example Stylesheet
아래 나오는 스타일시트는 이번 페이지의 모든 예제에 사용될 것 입니다.
| .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } | cs |
3. jQuery addClass() Method
아래 예제는 다른 요소에 class 속성을 추가하는 방법을 보여줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some important text!</div><br> <button>Add classes to elements</button> </body> </html> | cs |
여러 클래스를 addClass() 메소드로 명시할 수도 있습니다:
| $("button").click(function(){ $("#div1").addClass("important blue"); }); | cs |
4. jQuery removeClass() Method
| $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); | cs |
5. jQuery toggleClass() Method
아래 예제는 toggleClass() 메소드를 어떻게 사용하는지 보여주는 예제입니다.
| $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); | cs |