[HTML_CSS] JQ - innerWidth() 메서드 - 선택요소 너비 반환 (※ padding 포함 O , border 포함 X) (= innerWidth메서드 = 이너위드스메서드)

1. innerWidth() 예제 - (width + padding) 너비 반환.
2. innerWidth() 정의
3. innerWidth() 구문
4. 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>

 

결과보기