Contents
addClass()- 선택한 요소에 하나 이상의 클래스를 추가
removeClass()- 선택한 요소에서 하나 이상의 클래스를 제거
toggleClass()- 선택한 요소에서 클래스 추가/제거 간을 전환
css()- 스타일 속성을 설정하거나 반환
1. addClass()
- 다양한 요소에 클래스 특성을 추가하는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: green; } </style> </head> <body> <h1>CssClass addClass() 실습하기</h1> <hr> <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> <script> $(document).ready(function () { $("button").click(function () { $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); }); </script> </body> </html>
2. addClass()
- 소드 내에서 여러 클래스를 지정 가능
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: green; } </style> </head> <body> <h1>CssClass addClass() 실습하기2</h1> <hr> <div id="div1">This is some text.</div> <div id="div2">This is some text.</div> <br> <button>Add classes to first div element</button> <script> $(document).ready(function () { $("button").click(function () { $("#div1").addClass("important blue"); }); }); </script> </body> </html>
3. RemoveClass()
- 다양한 요소에서 특정 클래스 특성을 제거하는 방법
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: green; } </style> </head> <body> <h1>CssClass RemoveClass() 실습하기</h1> <hr> <h1 class="blue">Heading 1</h1> <h2 class="blue">Heading 2</h2> <p class="blue">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Remove class from elements</button> <script> $(document).ready(function () { $("button").click(function () { $("h1, h2, p").removeClass("blue"); }); }); </script> </body> </html>
4. toggleClass()
- 선택한 요소에서 클래스 추가/제거 간을 전환
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .important { font-weight: bold; font-size: xx-large; } .blue { color: green; } </style> </head> <body> <h1>CssClass toggleClass() 실습하기</h1> <hr> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Toggle class</button> <script> $(document).ready(function () { $("button").click(function () { $("h1, h2, p").toggleClass("blue"); }); }); </script> </body> </html>
Share article
