jQuery 스타일 관련 메서드
jQuery 스타일 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다.
속성 관련 메서드에는 css() , width()height() 관련, 위치 관련 메서드가 있습니다.
01. css() 메서드
| 실행 분류 | 형식 |
|---|---|
| 취득 | $("div").css("width"); |
| 생성, 변경 | $("div").css("background-color", "red").css("padding", "10px"); |
| $("div").css({background-color: "red", padding:"10px"}); | |
| 콜백 함수 | $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); .... <div>내용</div> <div>내용</div> <div>내용</div> |
01-1. 예제
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css() 메서드</title>
<style>
* {
margin: 0;
padding: 0;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: blue;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("div").eq(0).css({padding: 10, "text-align": "center"});
$("div").css("width", function(index) {
return index * 100 + 100; // 100, 200, 300
});
});
</script>
</head>
<body>
<div>내용1</div>
<div>내용2</div>
<div>내용3</div>
</body>
</html>
}
01-2. 결과물
02. width, height 관련 메서드
| 메서드 종류 | 설명 |
|---|---|
| width() | 요소의 가로 길이를 취득, 변경할 수 있습니다. |
| innerWidth() | padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. |
| outerWidth() | border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width값 + 좌, 우 border값 outerWidth(true)는 요소의 width값 + 좌, 우 border값 +좌, 우 margin값 |
| height() | 요소의 높이를 취득, 변경할 수 있습니다. |
| innerHeight() | padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다. |
| outerHeight() | border와 margin이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight()는 요소의 height값 + 상,하 border값 outerHeight(true)는 요소의 height값 +상,하 border값 + 상,하 margin값 |
02-1. 예제
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>width, height 관련 메서드</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 20px;
margin: 20px;
background: #ff6600;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("div").width(150).height(150);
console.log("width " + $("div").width());
console.log("height " + $("div").height());
console.log("innerWidth " + $("div").innerWidth());
console.log("innerHeight " + $("div").innerHeight());
console.log("outerWidth " + $("div").outerWidth(true));
console.log("outerHeight " + $("div").outerHeight(true));
});
</script>
</head>
<body>
<div>내용</div>
</body>
</html>
}
02-2. 결과물
03. 위치 관련 메서드
| 메서드 종류 | 설명 | |
|---|---|---|
| offset() |
$("div").offset().left $("div").offset().top $("div").offset({left: 10, top: 10}) |
html 기준으로 left, top 값을 취득, 변경할 수 있습니다. |
| position() | $("div").position().left $("div").position().top |
부모 요소 기준으로 left, top 값을 취득할 수 있습니다. |
03-1. 예제
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>위치 관련 메서드</title>
<style>
* {
margin: 0;
padding: 0;
}
footer {
width: 500px;
height: 500px;
margin: 50px;
position: relative;
background: #ff6600;
}
#inner {
width: 100px;
height: 100px;
position: absolute;
left: 80px;
top: 50px;
background: #ccc;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($("#inner").offset().left);
console.log($("#inner").offset().top);
console.log($("#inner").position().left);
console.log($("#inner").position().top);
});
</script>
</head>
<body>
<div id="outer">
<div id="inner">내용</div>
</div>
</body>
</html>
}
03-2. 결과물
'jQuery' 카테고리의 다른 글
| jQuery 속성 메서드 (2) | 2022.09.03 |
|---|---|
| jQuery 클래스 메서드 (3) | 2022.09.03 |
| 탐색 선택자 (4) | 2022.08.30 |
| 필터 선택자 (4) | 2022.08.30 |
| 속성 선택자 (4) | 2022.08.30 |
댓글