728x90
위치 및 크기를 표현하는 속성 메서드
width:400px
margin:20px
border:1px
pading:20px
margin:20px
border:1px
pading:20px
여기에 결과값이 표시됩니다.
const box1 = document.querySelector("#sample01 .sbox");
document.querySelector("#sample01 .btn1").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 " + box1.clientWidth + "px(margin/border미포함) 입니다."
})
document.querySelector("#sample01 .btn2").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 높이값은 " + box1.clientHeight + "px(margin/border미포함) 입니다."
})
document.querySelector("#sample01 .btn3").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 Y축값은 " + box1.clientTop + "px(부모기준) 입니다."
})
document.querySelector("#sample01 .btn4").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 X축값은 " + box1.clientLeft + "px(부모기준) 입니다."
})
document.querySelector("#sample01 .btn5").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은 " + box1.offsetWidth + "px(border/padding 포함) 입니다."
})
document.querySelector("#sample01 .btn6").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 세로값은 " + box1.offsetHeight + "px(border/padding 포함) 입니다."
})
document.querySelector("#sample01 .btn7").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 Y축값은 " + box1.offsetTop + "px(문서기준) 입니다."
})
document.querySelector("#sample01 .btn8").addEventListener("click", (e) => {
e.preventDefault();
document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 X축값은 " + 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 = "";
for(let key in rect){
if(typeof rect[key] !== "function"){
let span = document.createElement("span");
span.textContent = `${key}: ${rect[key]} `;
result.appendChild(span);
}
}
})
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]비구조화 할당 (4) | 2022.09.20 |
|---|---|
| [javascript]mouseenter / mouseover 차이점 (5) | 2022.09.05 |
| [javascript]GSAP (4) | 2022.08.29 |
| [javascript]charAt() / charCodeAt() (3) | 2022.08.22 |
| [javascript]match() (3) | 2022.08.22 |
댓글