JAVA_EE/JQuery

[JQuery] CSS 적용 여부 확인(hasClass()), 클래스 적용 및 해제(addClass() / removeClass()), 적용 해제 반복처리(toggleClass())

luvforjunk 2021. 10. 14. 12:14
728x90
반응형

[21.10.14] exam01(04_jQueryCSS) - CSS 제어하기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box1 {
	margin: 10px auto;
	border: 5px solid #ccc;
	padding: 30px;
	text-align: center;
}

.box2 {
	margin: 10px auto; /* margin 좌우 여백을 auto로 잡으면 가운데 정렬하라는 의미  */ 
	border: 10px solid #ff00ff;
	background-color: #ff0;
	padding: 25px;
	text-align: left;
}
</style>
</head>
<body>
	<h1>CSS제어하기</h1>
	<div id="box" class="box1">
		<h1>테스트 영역 입니다.</h1>
	</div>
	<input type="button" id="btn1" value="(폰트) red" />
	<input type="button" id="btn2" value="(폰트) green" />
	<input type="button" id="btn3" value="(폰트) blue" />
	<input type="button" id="btn4" value="(배경) red" />
	<input type="button" id="btn5" value="(배경) green" />
	<input type="button" id="btn6" value="(배경) blue" />
	<input type="button" id="btn7" value="width=50%" />
	<input type="button" id="btn8" value="width=auto" />
	<input type="button" id="btn9" value="box1 클래스 적용" />
	<input type="button" id="btn10" value="box2 클래스 적용" />
	
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 텍스트색 변경
	$('#btn1').click(function(){
		$('#box').css('color', 'red');
	});
	
	$('#btn2').click(function(){
		$('#box').css('color', 'green');
	});
	
	$('#btn3').click(function(){
		$('#box').css('color', 'blue');
	});
	
	// 배경색 변경
	$('#btn4').click(function(){
		$('#box').css('background-color', 'red');
	});
	
	$('#btn5').click(function(){
		$('#box').css('background-color', 'green');
	});
	
	$('#btn6').click(function(){
		$('#box').css('background-color', 'blue');
	});
	
	$('#btn7').click(function(){
		$('#box').css('width', '50%');
	});
	
	$('#btn8').click(function(){
		$('#box').css('width', 'auto');
	});
	
	$('#btn9').click(function(){
		$('#box').addClass('box1');
		$('#box').removeClass('box2');
	});
	
	$('#btn10').click(function(){
		$('#box').addClass('box2');
		$('#box').removeClass('box1');
	});
});
</script>
</body>
</html>

<!-- 
(1) 속성값 읽기
var 변수명 = $("요소").css("CSS 속성이름");

(2) 속성값 변경 및 추가하기
$("요소").css("속성이름", "값");

$("요소").css({
      "속성1이름": "값",
      "속성2이름": "값",
      "속성3이름": "값"
});

(1) CSS 클래스의 적용 여부 알기
var 변수 = $("요소").hasClass("클래스이름");

(2) 클래스의 적용과 해제

$("요소").addClass("클래스이름"); - 클래스 속성 부여
$("요소").removeClass("클래스이름"); - 클래스 속성 제거

(3) 클래스의 적용과 해제의 반복 처리
- HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복
$("요소").toggleClass("클래스이름");
 -->

 

 

[결과]

결과창

 

728x90
반응형