HTML DOM clientTop 속성 – 요소의 위쪽 테두리 너비 구하기

HTML DOM clientTop 속성은 요소의 위쪽 테두리(top border) 너비를 픽셀(px) 단위로 반환합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수 없으며, 요소의 위쪽 마진(margin)이나 패딩(padding)은 계산에 포함되지 않는다는 점에 유의해야 합니다.

문법(Syntax)

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

element.clientTop;

예제(Example)

clientTop 속성을 활용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
    height: 250px;
    font-size:35px;
    text-align:center;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 15px solid blue;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 div의 위쪽 테두리 너비가 픽셀 단위로 표시됩니다.</p>
<button onclick="topWidth()">TOP WIDTH</button>
<div id="styleDiv">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
    function topWidth() {
        var x = document.getElementById("styleDiv");
        var txt = "Border top width: " + x.clientTop + "px";
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM clientTop 속성 – 요소의 위쪽 테두리 너비 구하기

TOP WIDTH 버튼을 클릭하면 −

HTML DOM clientTop 속성 – 요소의 위쪽 테두리 너비 구하기

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

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

먼저 id가 "styleDiv"인 div 요소를 만들고, 해당 id 선택자를 통해 스타일을 적용했습니다.

#styleDiv {
    height: 250px;
    font-size:35px;
    text-align:center;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 15px solid blue;
    background-color: lightgreen;
}

여기서 핵심은 border-top: 15px solid blue; 부분으로, 위쪽 테두리가 15px 파란색 실선으로 지정되어 있습니다.

<div id="styleDiv">
<b>A sample div</b>
</div>

2. 버튼 생성 및 클릭 이벤트 연결

다음으로, 클릭 시 topWidth() 함수를 실행하는 TOP WIDTH 버튼을 만들었습니다.

<button>TOP WIDTH</button>

3. clientTop 속성으로 테두리 너비 가져오기

topWidth() 함수는 getElementById() 메서드로 <div> 요소를 가져와 변수 x에 할당합니다. 그런 다음 clientTop 속성을 사용해 div의 위쪽 테두리 너비(픽셀 단위)를 구하고, 안내 문구와 함께 변수 txt에 저장합니다. 마지막으로 innerHTML 속성을 통해 txt 변수의 내용을 id가 "Sample"인 <p> 태그 안에 출력합니다.

function topWidth() {
    var x = document.getElementById("styleDiv");
    var txt = "Border top width: " + x.clientTop + "px";
    document.getElementById("Sample").innerHTML = txt;
}

참고 사항

clientTop 속성은 위쪽 테두리가 없는 경우 0을 반환합니다. 또한 유사한 속성으로 아래쪽·왼쪽·오른쪽 테두리 정보를 제공하는 clientLeft가 있으며, 요소의 전체 크기를 확인할 때는 clientHeight나 clientWidth 속성을 함께 활용하는 것이 좋습니다.