목차
- clientWidth 예제 - 요소 가시 너비
- clientWidth 정의
- clientWidth 구문
- clientWidth 예제 - offsetWidth와의 차이점
- 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) 즉, 스크롤바 생긴 경우 스크롤바 두께만큼 제외.
- 이 개념 이해하려면, CSS BOX모델 선행학습 필요.
- clientHeight 속성과 종종 함께 쓰임.
2. cf.
scrollWidth 속성 - 문서의 전체너비 (= 총 콘텐츠너비)
3.
padding, border, scrollbar 포함한 가시너비는 아래 속성 이용
4.
요소에 스크롤바 추가하려면, CSS overflow 속성 이용.
5.
모든 브라우저 지원.
6. MDN clientWidth 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
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>
결과보기
※ 스크롤바가 생긴 경우 스크롤바 두께만큼 제외.