<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<button>Return background-color of p</button>
<script>
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
</script>
</body>
</html>
이렇게 하면, css메서드는 여러 요소에 대해 호출될 때 첫 번째 요소의 값을 반환하기 때문에 빨간색으로만 background color가 뜬다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
<script>
$("button").click(function(){
$("p").css("background-color", "yellow");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
<script>
$("button").click(function(){
$("p").css({"background-color": "yellow","font-size": "200%"});
});
</script>
</body>
</html>
<!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: 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>
<script>
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
</script>
</body>
</html>
<!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: blue;
}
</style>
</head>
<body>
<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>
$("button").click(function(){
$("#div1").addClass("important blue");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<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>
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.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>
<button>Toggle class</button>
<script>
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
</script>
</body>
</html>
반복…
+) toggleClass는 특정 클래스가 요소에 존재하면 제거하고,
존재하지 않으면 추가하는 동작을 합니다. 이 과정을 "토글"이라고 부릅니다.
이 방법으로, 클래스의 상태를 동적으로 전환할 수 있습니다.Share article
