본문 바로가기
프로그래밍/jQuery & javaScript

[jQuery] CSS 추가, 삭제, 변경

by 밍구몬 2019. 10. 28.

jQuery 에서는 .css로 간단하게 css를 수정, 삭제, 추가 할 수 있다.

 

css를 새로 추가하거나 변경하는 방법은 같다.

 

CSS 추가 및 변경

$('h1').css('color','blue');

h1태그에 추가하고 싶은 css를 입력하고 두번째로 값을 입력해 주면 된다.

 

CSS 삭제

$('h1').css('color','');

삭제를 하고싶다면 그냥 빈 값을 입력해주면 된다.

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<h1 style="color:red">테스트</h1>
	<button id="b1">css추가 or 변경</button>
	<button id="b2">css삭제</button>
<script>
	$(document).ready(function(){
		setEvt();
	});
	
	function setEvt(){
		$('#b1').click(function(){
			$('h1').css('color','blue');
		});
		
		$('#b2').click(function(){
			$('h1').css('color','');
		});
	}
</script>
</body>
</html>