HTML DOM clientLeft 속성 완벽 가이드 – 요소의 왼쪽 테두리 너비 구하기

HTML DOM의 clientLeft 속성은 요소의 왼쪽 테두리(border-left) 너비를 픽셀 단위로 반환합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수는 없습니다.

clientLeft 속성은 세로 스크롤바의 너비까지 포함하여 반환하지만, 요소의 왼쪽 마진(margin)이나 왼쪽 패딩(padding)은 절대 포함하지 않는다는 점을 기억해야 합니다.

문법(Syntax)

clientLeft 속성의 기본 문법은 다음과 같습니다.

element.clientLeft

예제(Example)

HTML DOM clientLeft 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
    height: 200px;
    width: 200px;
    padding: 5px;
    margin: 10px;
    border-left: 10px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 왼쪽 테두리 너비가 픽셀 단위로 표시됩니다.</p>
<button onclick="leftWidth()">LEFT WIDTH</button>
<div id="styleDiv">
</div>
<p id="Sample"></p>
<script>
    function leftWidth() {
        var x = document.getElementById("styleDiv");
        var txt = "Border left width: " + x.clientLeft + "px";
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM clientLeft 속성 완벽 가이드 – 요소의 왼쪽 테두리 너비 구하기

LEFT WIDTH 버튼을 클릭하면 아래와 같이 결과가 출력됩니다.

HTML DOM clientLeft 속성 완벽 가이드 – 요소의 왼쪽 테두리 너비 구하기

코드 상세 설명

1. 스타일이 적용된 div 생성

먼저 id가 "styleDiv"인 div 요소를 만들고, 해당 id 선택자를 통해 다양한 스타일을 적용했습니다. 특히 border-left: 10px solid blue;로 왼쪽 테두리에 10px 너비의 파란색 실선을 지정했습니다.

#styleDiv {
    height: 200px;
    width: 200px;
    padding: 5px;
    margin: 10px;
    border-left: 10px solid blue;
    background-color: lightgreen;
}
<div id="styleDiv">
</div>

2. 버튼 클릭 이벤트 설정

다음으로 LEFT WIDTH라는 버튼을 생성하고, 클릭 시 leftWidth() 함수가 실행되도록 onclick 이벤트를 연결했습니다.

<button onclick="leftWidth()">LEFT WIDTH</button>

3. clientLeft 속성으로 너비 값 가져오기

leftWidth() 함수 내부에서는 getElementById() 메서드를 사용해 div 요소를 가져와 변수 x에 할당합니다. 그런 다음 해당 div에 clientLeft 속성을 적용하면 왼쪽 테두리의 너비를 얻을 수 있고, 여기에 안내 텍스트를 붙여 변수 txt에 저장합니다.

마지막으로 innerHTML 속성을 활용해 txt 변수의 내용을 결과를 표시할 문단(p 태그)에 출력합니다.

function leftWidth() {
    var x = document.getElementById("styleDiv");
    var txt = "Border left width: " + x.clientLeft + "px";
    document.getElementById("Sample").innerHTML = txt;
}

참고 사항

clientLeft는 읽기 전용 속성이므로 직접 값을 대입할 수 없습니다.
테두리가 없는 요소의 경우 clientLeft는 0을 반환합니다.
왼쪽 테두리뿐 아니라 콘텐츠 영역 기준의 오프셋이 필요하다면 clientTop, offsetLeft 등의 관련 속성도 함께 확인해 보세요.