element.clientLeft

clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다. 문서의 기준점으로부터 가져오는 offsetLeft 속성과 비교됩니다.

clientLeft

clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.

특징	설명
유형(type)	element
버전(version)	ES1
결과값(return)	숫자(number)
사용성	★★☆☆☆

문법(Syntax)

element.clientLeft

정의(Definition)

clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
clientLeft 속성은 문서의 기준점으로부터 가져오는 offsetLeft 속성과 비교됩니다.

크기 및 위치와 관련된 메서드(Dimensions Related method)

clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 가로/세로 값을 구하는 예제입니다.

width: 400px
margin: 20px
border: 1px
padding: 20px

여기에 결과값이 표시됩니다.

박스의 가로값(clientWidth)을 구합니다. 박스의 세로값(clientHeight)을 구합니다. 박스의 Y축값(clientTop)을 구합니다. 박스의 X축값(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 세로값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box">
        <span>
            width: 400px<br>
            margin: 20px<br>
            border: 1px<br>
            padding: 20px<br>
        </span>
    </div>
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</div>

.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #4390E1;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #fff;
}
.jsample .desc {
    padding-top: 10px;
}

const box = document.querySelector(".jsample .box");

document.querySelector(".sampleBtn .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 가로 값은 "+ box.clientWidth + "px 입니다.(마진/보더 불포함)";
});
document.querySelector(".sampleBtn .btn2").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 세로 값은 "+ box.clientHeight + "px 입니다.(마진/보더 불포함)";
});
document.querySelector(".sampleBtn .btn3").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 Y축 값은 "+ box.clientTop  + "px 입니다.(부모 기준)";
});
document.querySelector(".sampleBtn .btn4").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 X축 값은 "+ box.clientLeft  + "px 입니다.(부모 기준)";
});
document.querySelector(".sampleBtn .btn5").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 가로 값은 "+ box.offsetWidth  + "px 입니다.(보더/패딩 포함)";
});
document.querySelector(".sampleBtn .btn6").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 세로 값은 "+ box.offsetHeight  + "px 입니다.(보더/패딩 포함)";
});
document.querySelector(".sampleBtn .btn7").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 Y축 값은 "+ box.offsetTop  + "px 입니다.(문서 기준)";
});
document.querySelector(".sampleBtn .btn8").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(".jsample .desc").innerHTML = "이 박스의 X축 값은 "+ box.offsetLeft  + "px 입니다.(문서 기준)";
});