HTML DOM의 borderLeftWidth 속성은 요소의 왼쪽 테두리(border-left) 너비를 설정하거나 현재 값을 가져올 때 사용됩니다. 자바스크립트를 통해 동적으로 테두리 두께를 변경해야 하는 경우 유용하게 활용할 수 있습니다.
문법(Syntax)
borderLeftWidth 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderLeftWidth = "thin|medium|thick|length|initial|inherit"
속성 값(Property Values)
borderLeftWidth 속성에 사용할 수 있는 값은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| thin | 얇은(thin) 테두리를 지정합니다. |
| medium | 중간(medium) 두께의 테두리를 지정합니다. 기본값(default)입니다. |
| thick | 두꺼운(thick) 테두리를 지정합니다. |
| length | px, em 등 특정 단위로 테두리 너비를 직접 지정합니다. (예: "5px", "0.3em") |
| initial | 이 속성을 초기값(기본값)으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 borderLeftWidth 속성을 사용하여 div 요소의 왼쪽 테두리 너비를 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-left-width: 30px;
}
</style>
<script>
function changeLeftWidth(){
document.getElementById("DIV1").style.borderLeftWidth = "1px";
document.getElementById("Sample").innerHTML = "왼쪽 테두리 너비가 줄어들었습니다.";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 위 div의 왼쪽 테두리 너비가 변경됩니다.</p>
<button onclick="changeLeftWidth()">왼쪽 너비 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
페이지를 처음 열면 왼쪽 테두리가 30px로 굵게 표시됩니다.
이후 “왼쪽 너비 변경” 버튼을 클릭하면 자바스크립트 함수가 실행되어 왼쪽 테두리 너비가 1px로 줄어들고, 결과 메시지가 화면에 출력됩니다.
정리
borderLeftWidth 속성은 CSS의 border-left-width 속성을 자바스크립트로 제어할 수 있게 해주는 DOM 스타일 속성입니다. 예약어(thin, medium, thick)뿐만 아니라 px, em 같은 절대·상대 단위도 지원하므로, 사용자 인터랙션에 따라 테두리 스타일을 실시간으로 바꾸는 UI를 구현할 때 활용하면 좋습니다.