▷ css() 함수
→ css('속성명', '값') 형식으로 호출 시 해당 CSS속성값을 변경할 수 있는 함수
→ 속성명만 지정 시 해당 CSS 속성값을 리턴받을 수 있음
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// h3 태그의 color 속성값 가져오기
var h3Color = $('h3').css('color');
alert(h3Color); // rgb(0, 0, 0) 출력 => BLACK 색상값
// h3 태그 중 첫번째 요소의 color 속성값을 초록색으로 변경
$('h3:first').css('color', 'green');
// css() 함수 내에서 구현되는 익명 함수의 파라미터
//function(Integer index)
$('h3').css('color', function(index) {
// h3 태그를 차례대로 접근하면서 해당 요소의 인덱스 출력(0, 1, 2)
alert(index);
});
// function(Integer index, String value)
// => 첫번째 파라미터 : 해당 요소의 인덱스(0부터 시작)
// 차례대로 전달(= 1씩 증가)
// => 두번째 파라미터 : 각 인덱스에 해당하는 요소의 CSS 속성값
// => 자바스크립트에 의해 익명 함수가 호출될 때 자동으로 값이 전달됨
// $('h3').css('color', function(index, value) {
// alert(index + ", " + value);
// });
var colorValue = ['red', 'green', 'blue']; // 글자색
var bgColorValue = ['cyan', 'magenta', 'yellow']; // 배경색
// h3 태그의 color 속성값을 차례대로 한꺼번에 변경하기(colorValue 배열 활용)
// $('h3').css('color', function(index) {
// // return 문을 사용하여 특정 값 리턴 시 해당 요소의 속성값 변경 가능
// // => 함수에서 리턴되는 값이 함수 코드가 기술된 부분에 위치하게 되므로
// 속성값으로 활용됨
// return colorValue[index]; // 0, 1, 2 번 배열 값을 차례대로 리턴하게 됨
// // => 따라서, 제목1, 제목2, 제목3 에 해당하는 h3 태그의 color 속성이
// // red, green, blue 값으로 차례대로 변경됨
// });
// h3 태그의 backgroundColor 속성값을 차례대로
// 한꺼번에 변경하기(bgColorValue 배열 활용)
// $('h3').css('backgroundColor', function(index) {
// return bgColorValue[index];
// });
// 동일한 대상에 복수개의 속성을 변경해야할 경우
// $('선택자').css({속성1:함수(index) {}, 속성2:함수(index) {}});
$('h3').css({
// 변경할 속성명:함수() 형태로 구현하며, 각 속성은 콤마(,)로 구분
// color 속성에 접근하여 colorValue 배열 값을 차례대로 적용
color:function(index) {
return colorValue[index];
},
backgroundColor:function(index) {
return bgColorValue[index];
}
});
});
</script>
</head>
<body>
<h1>JQuery - test3.jsp</h1>
<h3>제목1</h3>
<h3>제목2</h3>
<h3>제목3</h3>
</body>
</html>'JSP' 카테고리의 다른 글
| JQuery (이벤트2) (0) | 2022.03.04 |
|---|---|
| JQuery (이벤트) (0) | 2022.03.04 |
| JQuery (선택자) (0) | 2022.03.04 |
| JQuery (사용방법) (0) | 2022.03.04 |
| MVC 모델 (6) - 최근 공지사항 메인페이지에 출력 (0) | 2022.03.01 |
