• Q&A
  • 회원가입
  • 로그인

[DOM_Element] JS - clientWidth 속성 ★ - 요소너비 (= 요소가시너비 = clientWidth속성 = 클라이언트위드스 속성)

목차

  1. clientWidth 예제 - 요소 가시 너비
  2. clientWidth 정의
  3. clientWidth 구문
  4. clientWidth 예제 - offsetWidth와의 차이점
  5. clientWidth 예제 - 스크롤바 생긴 경우

 

clientWidth 예제 - 요소 가시 너비

 

<style>

#hz {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid blue;

  background-color: yellow;

}

</style>


<button onclick="homzzang()">클릭</button>


<div id="hz">

  <b>div 정보</b><br>

  Height: 250px<br>

  Width: 400px<br>

  padding: 10px<br>

  margin: 15px<br>

  border: 5px<br>

  <p id="demo"></p>

</div>


<script>

function homzzang() {

  var box = document.getElementById("hz");

  var txt = "padding 포함 높이: " + box.clientHeight + "px<br>";

  txt += "padding 포함 너비: " + box.clientWidth + "px";

  document.getElementById("demo").innerHTML = txt;

}

</script>


결과보기

 

clientWidth 정의

 

padding 포함한 px단위의 요소 가시너비 반환.

(※ border, scrollbar, margin 제외)

 


 

1.

가시(可視) 표현 사용 이유 (= 보이는 부분 표현 사용 이유)
요소 내용물이 요소보다 큰 경우, 보이는 너비만 반환하기 때문. (아래 예제2)

즉, 스크롤바 생긴 경우 스크롤바 두께만큼 제외.

 

2.
이 개념 이해하려면, CSS BOX모델 선행학습 필요.

3.
clientHeight 속성과 종종 함께 쓰임.

4.

padding, border, scrollbar 포함한 가시너비는 아래 속성 이용

 

5.

요소에 스크롤바 추가하려면, CSS overflow 속성 이용.

 

 

clientWidth 구문

 

element.clientWidth

 

 

clientWidth 예제 - offsetWidth와의 차이점

 

<style>

#hz {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid blue;

  background-color: yellow;

}

</style>


<button onclick="homzzang()">클릭</button>


<div id="hz">

  <b>div 정보</b><br>

  Height: 250px<br>

  Width: 400px<br>

  padding: 10px<br>

  margin: 15px<br>

  border: 5px<br>

  <p id="demo"></p>

</div>


<script>

function homzzang() {

  var box = document.getElementById("hz");

  var txt = "";

  txt += "padding 포함 높이: " + box.clientHeight + "px<br>";

  txt += "padding, border 포함 높이: " + box.offsetHeight + "px<br>";

  txt += "padding 포함 너비: " + box.clientWidth + "px<br>";

  txt += "padding, border 포함 너비: " + box.offsetWidth + "px";

  document.getElementById("demo").innerHTML = txt;

}

</script>


결과보기

 

clientWidth 예제 - 스크롤바 생긴 경우

 

<style>

#hz1 {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid red;

  background-color: silver;

  overflow: auto;

}


#hz2 {

  height: 250px;

  width: 400px;

  padding: 10px;

  margin: 15px;

  border: 5px solid red;

  background-color: silver;

}


#content {

  height: 500px;

  width:750px ;

  background-color: yellow;

}

</style>


<button onclick="homzzang()">클릭</button>


<div id="hz1">

  <div id="content"></div>

</div>


<div id="hz2">

  <div id="content2"></div>

</div>


<script>

function homzzang() {

  var box1 = document.getElementById("hz1");

  var txt = "";

  txt += "<b>box1 정보:</b><br>"; // 스크롤바 있는 경우

  txt += "padding 포함 높이: " + box1.clientHeight + "px<br>";

  txt += "padding, border, scrollbar 포함 높이: " + box1.offsetHeight + "px<br>";

  txt += "padding 포함 너비: " + box1.clientWidth + "px<br>";

  txt += "padding, border, scrollbar 포함 너비: " + box1.offsetWidth + "px";

  document.getElementById("content").innerHTML = txt;


  var box2 = document.getElementById("hz2");

  var txt2 = "";

  txt2 += "<b>box2 정보:</b><br>"; // 스크롤바 없는 경우

  txt2 += "padding 포함 높이: " + box2.clientHeight + "px<br>";

  txt2 += "padding, border, scrollbar 포함 높이: " + box2.offsetHeight + "px<br>";

  txt2 += "padding 포함 너비: " + box2.clientWidth + "px<br>";

  txt2 += "padding, border, scrollbar 포함 너비: " + box2.offsetWidth + "px";

  document.getElementById("content2").innerHTML = txt2;

}

</script>

 

결과보기

※ 스크롤바가 생긴 경우 스크롤바 두께만큼 제외.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012