WEB/JQuery
[JQuery] css 조작 방법
애플쩀
2022. 6. 13. 15:57
[jquery로 css 조작 방법]
ㄱ.css()
ㄴ.addClass() - 추가
ㄷ.removeClass() -제거
ㄹ.toggleClass() -선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 15:49:10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.blue{
color:blue;
}
.important{
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<h3>ex05.html</h3>
<pre>
[jquery로 css 조작 방법]
ㄱ.css()
ㄴ.addClass()
ㄷ.removeClass()
ㄹ.toggleClass()
ㅁ.
</pre>
<h1>Lorem, ipsum dolor.</h1>
<h1>Distinctio, esse labore.</h1>
<p>Lorem, ipsum dolor.</p>
<p>Incidunt, tempora quasi!</p>
<p>Ipsum, obcaecati mollitia.</p>
<div>Lorem, ipsum dolor.</div>
<button>add Class</button>
<script>
$("button").click(function(){
// $("h1").css("color","red");
//$("h1, h2, p").addClass("blue");
$("p").removeClass("blue");
$("h1").toggleClass("important");
});
</script>
</body>
</html>