width(value)
height(value)
: 일치하는 집합에 속한 모든 엘리먼트의 너비나 높이를 value로 설정한다.
$("div.elements").width(500)
위의 코드는 아래 코드와 동일하다.
$("div.elements").css({"width":"500px"});
width()
height()
: 선택된 집합의 첫번째 엘리먼트의 너비나 높이를 가져온다.
매개변수
: 없음
반환값
: 계산된 너비나 높이의 숫자값
아래는 윈도우가 리사이징 될때 선택된 div 엘리먼트의 width와 height를 동적으로 가져와서 화면에 표시해주는 예이다.
==== width_height.jsp ====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>width()/height() 테스트</title>
<link rel="stylesheet" type="text/css" href="/css/core/common.css">
<style>
#testSubject {
background-color: #cfeace;
border: 1px solid #00457b;
padding: 8px;
font-size: .85em;
}
</style>
</head>
<body>
<div id="testSubject">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer at metus. Suspendisse potenti. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
<div id="display"></div>
<script type="text/xxjavascript" src="/jquery/jquery-1.7.1.js"></script>
<script type="text/xxjavascript">
(function($){
$.report = function(){
$("#display").html($("#testSubject").width() + "x" + $("#testSubject").height());
};
$(window).resize($.report);
})(jQuery);
</script>
</body>
</html>
--> resize() 이벤트 메서드를 통해서 윈도우가 리사이징 될대 $.report 메서드를 호출한다.
