HTML DOM clientTop 속성

<시간/>

HTML DOM clientTop 속성은 요소의 위쪽 테두리 너비를 픽셀 단위로 반환합니다. 읽기 전용 속성입니다. 요소의 상단 여백 또는 상단 패딩은 이 속성에 포함되지 않습니다.

구문

다음은 clientTop 속성의 구문입니다 -

element.clientTop;

예시

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>Click the below button to get the div top border width in pixels </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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM clientTop 속성

TOP WIDTH −

클릭 시

HTML DOM clientTop 속성

위의 예에서 -

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;
}

div -

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

그런 다음 클릭 시 topWidth() 메서드를 실행하는 TOP WIDTH 버튼을 만들었습니다. −

<button>TOP WIDTH</button>

topWidth()는 getElementById() 메서드를 사용하여

요소를 가져와 변수 x에 할당합니다. 그런 다음

의 clientTop 속성을 사용하여 상단 테두리 너비를 픽셀 단위로 가져오고 일부 텍스트를 추가한 후 변수 txt에 할당합니다. txt 안의 텍스트는 innerHTML 속성을 사용하고 txt 변수를 할당하여 ID가 "Sample"인 단락 안에 표시됩니다. -

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