<div id="sample01" class="sample">
<h3 class="blue">크기 및 위치를 표현하는 속성 및 메서드</h3>
<div class="view">
<div class="sbox">
<span>
width: 400px; <br>
margin: 20px; <br>
border: 1px; <br>
padding: 20px;
</span>
</div>
<p class="sResult">여기에 결과값이 표시됩니다.</p>
</div>
<div class="button">
<a href="#" class="btn1">박스의 너비값(clientWidth)을 구합니다.</a>
<a href="#" class="btn2">박스의 높이값(clientHeight)을 구합니다.</a>
<a href="#" class="btn3">박스의 Y축 값(clientTop)을 구합니다.</a>
<a href="#" class="btn4">박스의 X축 값(clientLeft)을 구합니다.</a>
<a href="#" class="btn5">박스의 너비값(offsetWidth)을 구합니다.</a>
<a href="#" class="btn6">박스의 높이값(offsetHeight)을 구합니다.</a>
<a href="#" class="btn7">박스의 Y축 값(offsetTop)을 구합니다.</a>
<a href="#" class="btn8">박스의 X축 값(offsetLeft)을 구합니다.</a>
<a href="#" class="btn9">박스의 element.getBoundingClientRect( )을 구합니다.</a>
</div>
<!-- //button -->
</div>a {
text-decoration: none;
}
.sample .view {
border: 1px solid #aaa2dd;
padding: 30px 20px 20px 20px;
}
.sample .blue {
background-color: #eeebff;
padding: 10px 20px 10px 20px;
border-radius: 5px 5px 0 0;
margin-bottom: 0;
border: 1px solid #aaa2dd;
border-bottom: 0;
color: #222;
}
.sample .sbox {
width: 400px;
height: 200px;
background-color: #c6bff3;
border: 1px solid #9887f7;
padding: 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
text-align: center;
color: #fff;
}
.sample .sbox::after {
content: '';
width: 480px;
height: 280px;
border: 1px dashed #9887f7;
position: absolute;
left: -21px;
top: -21px;
}
.sample .sbox::before {
content: '';
width: 398px;
height: 198px;
border: 1px dashed #9887f7;
position: absolute;
left: 20px;
top: 20px;
}
.sample .sResult {
text-align: center;
padding-top: 10px;
}
.sample .button {
border: 1px solid #a2cbfa;
border-top: 0;
padding: 20px;
}
.sample .button a {
border: 1px solid #958bdb;
color: #8b80ce;
border-radius: 40px;
padding: 10px 20px;
display: inline-block;
margin: 5px;
}
.sample .button a:hover {
background-color: #958bdb;
color: #fff;
}const box1 = document.querySelector("#sample01 .sbox");
document.querySelector("#sample01 .btn1").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.clientWidth + " px 입니다. (바깥여백/테두리 불포함)";
});
document.querySelector("#sample01 .btn2").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.clientHeight + " px 입니다. (바깥여백/테두리 불포함)";
});
document.querySelector("#sample01 .btn3").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.clientTop + " px 입니다. (부모를 기준으로 계산)";
});
document.querySelector("#sample01 .btn4").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.clientLeft + " px 입니다. (부모를 기준으로 계산)";
});
document.querySelector("#sample01 .btn5").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.offsetWidth + " px 입니다. (바깥여백/테두리 포함)";
});
document.querySelector("#sample01 .btn6").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.offsetHeight + " px 입니다. (바깥여백/테두리 포함)";
});
document.querySelector("#sample01 .btn7").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.offsetTop + " px 입니다. (문서를 기준으로 계산)";
});
document.querySelector("#sample01 .btn8").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.offsetLeft + " px 입니다. (문서를 기준으로 계산)";
});
document.querySelector("#sample01 .btn9").addEventListener("click", (e) => {
e.preventDefault();
const box = document.querySelector("#sample01 .sbox");
const result = document.querySelector("#sample01 .sResult");
const rect = box.getBoundingClientRect();
result.innerHTML = "";
// rect 안에 있는 key 값을 불러오자
for( let key in rect){
if(typeof rect[key] !== "function"){ // key 값에서 함수가 아닌 것을 찾기
let span = document.createElement("span"); // 그 값을 span 에 넣어줌
span.textContent = `${key}: ${rect[key]} `; // 표현 방법 (x : 100) 설정
result.appendChild(span); // 그 결과를 span 에 출력
}
}
// document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 "+ box1.getBoundingClientRect() + " px (문서를 기준으로) 입니다.";
// console.log(box1.getBoundingClientRect());
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.