728x90
반응형
스타일 관련 메서드
css() 메서드
| 실행 분류 | 형식 |
|---|---|
| 취득 | &("div").attr("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> |
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
prop() 메서드
attr()가 html attribute(속성)에 관련된 메서드라면 prop()는 자바스크립트 propetty(프로퍼티)에 관련된 메서드 입니다.
prop() 메서드는 요소의 속성을 true, false로 제어할 수 있습니다.
prop() 메서드는 요소의 속성을 true, false로 제어할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(document).ready(function () {
$("#m_menu a.m").click(function () {
$(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
return false;
});
});
</script>
</head>
</html>
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
width, height 관련 메서드
| 메서드 종류 | 설명 |
|---|---|
| width() | 요소의 가로 길이를 취득, 변경할 수 있습니다. |
| innerWidth() | padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. |
| onterWidth() | border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width값 + 좌/우 border값 outerWidth(true)는 요소의 Widthr값 + 좌/우 boder값 + 좌/우 margin값 |
| height() | 요소의 높이를 취득, 변경할 수 있습니다. |
| innerHeight() | padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다. |
| outerHeight() | boder 와 margin이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight()는 요소의 height값 + 상/하 boder값 outerHeight(true)는 요소의 height값 = 상/하 boder값 + 상/하 margin값 |
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
위치 관련 메서드
| 메서드 종류 | 설명 |
|---|---|
| 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 값을 취득할 수 있습니다. |
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
728x90
댓글