jQuery 스타일 메서드

jQuery 스타일 메서드

attr() 메서드

실행 분류	형식
취득	$("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>

위의 예시를 사용하여 jQuery를 사용해보았습니다.

🐳 jQuery 스타일 메서드의 코드만 보기

$(document).ready(function() {
    $("div").eq(0).css({padding: 10, "text-align": "center"});
    $("div").css("width", function(index) {
        return index * 100 + 100; // 100, 200, 300
    });
});/code>

width, height 관련 메서드

메서드 종류	설명
width()	요소의 가로 길이를 취득, 변경할 수 있습니다.
innerWidth()	padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다.
outerWidth()	border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()의 요소의 width값 + 좌 · 우 border 값 outerWidth(true)의 요소의 width값 + 좌 · 우 border 값 + 좌 · 우 margin 값
height()	요소의 가로 높이를 취득, 변경할 수 있습니다.
innerHeight()	padding이 적용된 요소의 높이 길이를 취득, 변경할 수 있습니다.
outerHeight()	border와 margin이 적용된 요소의 높이 길이를 취득, 변경할 수 있습니다. outerHeight()의 요소의 width값 + 상 · 하 border 값 outerHeight(true)의 요소의 width값 + 상 · 하 border 값 + 상 · 하 margin 값

위의 예시를 사용하여 jQuery를 사용해보았습니다.

🐳 jQuery 스타일 메서드의 코드만 보기

$(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));
});

위치 관련 메서드

메서드 종류	설명
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 값을 취득, 변경할 수 있습니다.

위의 예시를 사용하여 jQuery를 사용해보았습니다.

🐳 jQuery 스타일 메서드의 코드만 보기

$(document).ready(function() {
    console.log($("#inner").offset().left);
    console.log($("#inner").offset().top);
    console.log($("#inner").position().left);
    console.log($("#inner").position().top);
});