3. jquery Method [ .addClass() ] - 클래스 값을 추가하는 메소드

jQuery/Method

2020. 2. 18. 14:55

3. jquery Method [ .addClass() ] - 클래스 값을 추가하는 메소드

문법

.addClass("className")

예를 들어

1. $("p").addClass("tag")
2. $("p").addClass("tag tagA tageB")

1. p태그에 tag라는 class를 추가합니다.

2. 띄어쓰기를 써서 여러개의 class를 추가할 수 있습니다. (tag, tagA, tagB)

예제 코드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>Home</title>
		<style type="text/css">
      	.tagA {
      		background-color: #eeeeee;
      	}
      	.tagB {
      		border: 1px solid #666666;
      	}
      		 
		</style>
	</head>
	<script type="text/javascript">
    $(document).ready(function(){
      $("#ab").addClass("tagA");
      $("#cd").addClass("tagA tagB");
    });
	</script>
	<body>
		<p id="ab">ABC<p>
		<p id="cd">ABC<p>
		
	</body>
</html>

$("#ab").addClass("tagA");

- id가 ab인 p태그에 tagA 라는 class값을 추가해 줍니다.

$("#cd").addClass("tagA tagB");

- id가 cd인 p태그에 tagA, tagB 라는 class값을 추가해 줍니다.

실행 테스트