728x90
🧷 jQuery : 스타일 관련 메서드
➰ 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> |
➿ css() 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
⭐️ 결과 ⭐️
➰ 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값 |
➿ width, height 관련 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
⭐️ 결과 ⭐️
➰ 위치 관련 메서드
| 메서드 종류 | 설명 | |
|---|---|---|
| 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 값을 취득할 수 있습니다. |
➿ 위치 관련 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>위치 관련 메서드</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
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>
⭐️ 결과 ⭐️
'jQuery' 카테고리의 다른 글
| 속성 관련 메서드 (3) | 2022.09.04 |
|---|---|
| 클래스 관련 메서드 (3) | 2022.09.04 |
| jQuery : 탐색 선택자 (12) | 2022.08.31 |
| jQuery : 필터 선택자 (10) | 2022.08.31 |
| jQuery : 속성 선택자 (16) | 2022.08.30 |
댓글