1. 일치하는 첫 번째 요소의 배경색 값을 반환
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>CSS() 일치하는 첫 번째 요소의 배경색 값을 반환 실습하기</h1> <hr> <h2>This is a heading</h2> <p style="background-color:orange">This is a paragraph.</p> <p style="background-color:green">This is a paragraph.</p> <p style="background-color:paleturquoise">This is a paragraph.</p> <button>Return background-color of p</button> <script> $(document).ready(function () { $("button").click(function () { alert("Background color = " + $("p").css("background-color")); }); }); </script> </body> </html>
2. 일치하는 모든 요소에 대해 배경색 값을 설정
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>CSS() 일치하는 모든 요소에 대해 배경색 값을 설정 실습하기</h1> <hr> <h2>This is a heading</h2> <p style="background-color:orange">This is a paragraph.</p> <p style="background-color:green">This is a paragraph.</p> <p style="background-color:paleturquoise">This is a paragraph.</p> <p>This is a paragraph.</p> <button>Set background-color of p</button> <script> $(document).ready(function () { $("button").click(function () { $("p").css("background-color", "orange"); }); }); </script> </body> </html>
3. 일치하는 모든 요소에 대해 배경색과 글꼴 크기를 설정
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>CSS() 일치하는 모든 요소에 대해 배경색과 글꼴 크기를 설정 실습하기</h1> <hr> <h2>This is a heading</h2> <p style="background-color:orange">This is a paragraph.</p> <p style="background-color:green">This is a paragraph.</p> <p style="background-color:paleturquoise">This is a paragraph.</p> <p>This is a paragraph.</p> <button>Set background-color of p</button> <script> $(document).ready(function () { $("button").click(function () { $("p").css({ "background-color": "orange", "font-size": "200%" }); }); }); </script> </body> </html>
Share article
