jQuery - 스타일메서드

스타일 관련 메서드

CSS() 메서드

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) { //indexs는 각 div 요소의 index0,1,2 //w는 각 div 요소의 width 값 return css 속성// 각 div 요소의 css 속성을 변경합니다. }); .... <div>내용</div> <div>내용</div> <div>내용</div>

css()를 사용한 예제 입니다.

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

결과

---

width, height관련 메서드

넓이와 높이를 설정할 수 있는 메서드입니다.

jQuery method형식은 다음과 같습니다.

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

width, height를 사용한 예제 입니다.

$(document).ready(function() {
    $("div").width(150).height(150);
    console.log("width 150" + $("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));
});

결과

---

position관련 메서드

위치 관련 메서드로 위치를 컨트롤 할 수 있습니다.

jQuery method형식은 다음과 같습니다.

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

position를 사용한 예제 입니다.

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

결과