목차
innerWidth() 예제 - (width + padding) 너비 반환.
innerWidth() 정의
innerWidth() 구문
innerWidth() 예제 - 너비 관련 메서드 비교.
innerWidth () 예제 - (width + padding) 너비 반환.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text(" innerWidth: " + $("div").innerWidth());
});
});
</script>
<div style="height:100px;width:200px;padding:10px ;margin:3px;border:1px solid blue;background-color:pink;"></div><br>
<button>클릭</button>
결과보기 (결과값: 220 = 200 + 10 x 2개)
innerWidth () 정의
요소의 innerWidth 너비 반환.
※ innerWidth() = width + padding
[관련 메서드]
width() - 선택요소의 너비 반환/설정.
innerWidth() - (width + padding) 반환.
outerWidth() - (width + padding + border) 반환.
outerWidth(true) - (width + padding + border + margin) 반환.
height() - 선택요소의 높이 반환/설정.
innerHeight() - (height + padding) 반환.
outerHeight() - (height + padding + border) 반환.
outerHeight(true) - (height + padding + border + margin) 반환.
innerWidth () 구문
$( selector ). innerWidth( )
[매개변수]
없음.
innerWidth () 예제 - 너비 관련 메서드 비교.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "width: " + $("#hz").width() + "</br>";
txt += "innerWidth: " + $("#hz").innerWidth() + "</br>";
txt += "outerWidth: " + $("#hz").outerWidth() + "</br>";
txt += "outerWidth (margin 포함O): " + $("#hz").outerWidth(true) + "</br>" + "</br>";
txt += "height: " + $("#hz").height() + "</br>";
txt += "innerHeight: " + $("#hz").innerHeight() + "</br>";
txt += "outerHeight: " + $("#hz").outerHeight() + "</br>";
txt += "outerHeight(margin 포함): " + $("#hz").outerHeight(true) + "</br>";
$("#hz").html(txt);
});
});
</script>
<style>
#hz {
height:300px;
width:300px;
padding:10px;
margin:4px;
border:2px solid blue;
background-color:lightblue;
}
</style>
<div id="hz"></div>
<button>클릭</button>
결과보기
주소 복사
랜덤 이동