스타일 제어(CSS)

태그에 스타일 제어

내가 원하는 대로 태그에 스타일(CSS)을 제어해보자.

css()

태그에 스타일 적용
이미 적용되어 있는 스타일보다 높은 우선순위를 가진다.

attr() 함수를 통해 스타일을 한 번에 여러 스타일을 적용할 수도 있다.

<script type="text/javascript">
		$(function() {
			// 스타일 지정
			// $("selector").css("스타일 key", "적용하고자 하는 값");
			$("div:eq(0)").css("color", "red").css("font-weight", "bold");
			$("div:eq(0)").attr("style", "color:green; font-weight:bold;");
			
			$("div:eq(1)").css("color", "blue");
		});
</script>

<body>
		<div id="sampleDiv1">스타일 제어1</div>
		<div id="sampleDiv2">스타일 제어2</div>
</body>

addClass(), removeClass(), hasClass()

태그에 클래스 적용, 삭제, 존재 여부 확인

<script type="text/javascript">
		$(function() {
				// 클래스명을 지정된 셀렉터에 추가
				// $("selector").addClass("클래스명")'
				$("#sampleDiv1").addClass("sample1");
				$("#sampleDiv2").addClass("sample2");
		
				// 클래스명을 지정된 셀렉터로부터 삭제
				// $("selector").removeClass("클래스명");
				$("#sampleDiv1").removeClass("sample2");
				$("#sampleDiv2").removeClass("sample1");
		
				// 클래스명이 지정된 셀렉터로부터 존재하는지 여부 판단 -> true/false
				// $("selector").hasClass("클래스명");
				// 출력 : 클래스 존재 여부 :  true
				console.log("클래스 존재 여부 : ", $("#sampleDiv1").hasClass("sample2"));
				// 출력 : 클래스 존재 여부 :  false
				console.log("클래스 존재 여부 : ", $("#sampleDiv2").hasClass("sample2"));
		});
</script>

<body>
		<div id="sampleDiv1" class="sample2">스타일 제어1</div>
		<div id="sampleDiv2" class="sample1">스타일 제어2</div>
</body>