목차
(너비/높이) 크기 관련 메서드 종류 예제1 - (너비/높이) 메서드 값 차이 예제2 - (document / window) 크기 예제3 - 요소의 (width / height) 설정
(너비/높이) 크기 관련 메서드 종류
width() : 순수 요소 너비 (= 가로길이) height() : 순수 요소 높이 (= 세로길이) innerWidth() : width + padding innerHeight() : height + padding outerWidth() : width + padding + border outerHeight() : height + padding + border outerWidth(true) : width + padding + border + margin outerHeight(true) : height + padding + border + margin
PS. 주의: (padding, border, margin)은 각각 "좌우 (상하)" 고려해 계산.
예제1 - (너비/높이) 메서드 값 차이
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "width(): " + $("#hz").width() + "</br>";
txt += "height(): " + $("#hz").height() + "</br>";
txt += "innerWidth(): " + $("#hz").innerWidth() + "</br>";
txt += "innerHeight(): " + $("#hz").innerHeight() + "</br>";
txt += "outerWidth(): " + $("#hz").outerWidth() + "</br>";
txt += "outerHeight(): " + $("#hz").outerHeight() + "</br>";
txt += "outerWidth(true): " + $("#hz").outerWidth(true) + "</br>";
txt += "outerHeight(true): " + $("#hz").outerHeight(true);
$("#hz").html(txt);
});
});
</script>
<style>
#hz {
height: 200px;
width: 300px;
padding: 10px;
margin: 20px;
border: 5px solid #f70542;
background-color: #fff8f8;
color:#f70542;
}
</style>
<div id="hz"></div>
<button>div 요소의 순수 면적 표시</button>
결과 보기
예제2 - (document / window) 크기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Document 너비x높이: " + $(document).width();
txt += "x" + $(document).height() + "\n ";
txt += "Window 너비x높이: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
});
</script>
<button>document와 window 면적 표시</button>
결과 보기
※ alert (얼럿창 = 경고창)에서는 줄바꿈을 \n 사용
예제3 - 요소의 (width / height) 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").width(200).height(25);
});
});
</script>
<style>
#hz {
height: 100px;
width: 300px;
padding: 10px;
margin: 20px;
border: 5px solid #f70542;
background-color: #fff8f8;
color: #f70542;
}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<button>Resize div</button>
결과 보기
