코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Style</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <style> .lined { text-decoration: line-through; color: lightgray; } </style> <script> $(function() { $("#addBtn").on("click", function() { // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함. $("#first, #third").addClass("lined"); }); $("#removeBtn").on("click", function() { // id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함. $("#first, #third").removeClass("lined"); }); }); </script> </head> <body> <h1>클래스의 추가 및 제거</h1> <p id="first">이 단락에 클래스를 추가해 보아요!</p> <p>이 단락에는 클래스를 추가하지 않아요!</p> <p id="third">이 단락에 클래스를 추가해 보아요!</p> <button id="addBtn">클래스 추가</button> <button id="removeBtn">클래스 제거</button> </body> </html>
