jQuery 배경색, 글자색 변경

1 개요[ | ]

jQuery 색상 변경
JQuery 배경색, 글자색 변경

obj.css("background-color","색상");
obj.css("color","색상");

2 예제 1: 소스 코드[ | ]

jQuery를 썼지만 전체 형식은 순수 JavaScript 스타일
색상 변경 부분이 잘 보이게 하기 위한 예제
예제: http://zetawiki.com/ex/jquery/change-color.php

<!DOCTYPE html>
<meta charset="utf-8" />

<div id="hello" style='width:200px;height:50px;background-color:blue;color:white'>안녕</div>
<button onclick='change_background_color()'>배경색 변경</button>
<button onclick='change_text_color()'>글자색 변경</button>
<button onclick='init_color()'>초기화</button>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
function change_background_color() {
	$("#hello").css("background-color","silver");
}

function change_text_color() {
	$("#hello").css("color","red");
}

function init_color() {
	$("#hello").css("background-color","blue");
	$("#hello").css("color","white");
}
</script>

3 예제 2: 소스 코드[ | ]

jQuery 스타일 예제
기능은 예제 1과 동일함
예제: http://zetawiki.com/ex/jquery/change-color2.php

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
#hello {
	width: 200px;
	height: 50px;
	background-color: blue;
	color: white;
}
</style>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
	$("#change_background_color").click( function() {
		$("#hello").css("background-color","silver");
	});
	$("#change_text_color").click( function() {
		$("#hello").css("color","red");
	});
	$("#init_color").click( function() {
		$("#hello").css("background-color","blue");
		$("#hello").css("color","white");
	});
});
</script>

<div id="hello">안녕</div>
<button id="change_background_color">배경색 변경</button>
<button id="change_text_color">글자색 변경</button>
<button id="init_color">초기화</button>

4 같이 보기[ | ]