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
