JavaScript에서 요소의 왼쪽 테두리 너비를 설정하려면 borderLeftWidth 속성을 사용하면 됩니다. 이 속성에 원하는 너비 값(px, em 등)을 할당하면 해당 요소의 왼쪽 테두리 두께가 즉시 변경됩니다.
아래 예제 코드를 직접 실행해 보면, 버튼 클릭 한 번으로 왼쪽 테두리의 너비가 어떻게 바뀌는지 쉽게 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id = "box">Demo Text</div>
<br>
<br>
<button type = "button" onclick = "display()">왼쪽 테두리 너비 변경</button>
<script>
function display() {
document.getElementById("box").style.borderLeftWidth = "10px";
}
</script>
</body>
</html>코드 설명
먼저 CSS에서 #box 요소에 thick solid gray 스타일의 테두리를 기본값으로 지정했습니다. 화면에는 회색 실선 테두리가 적용된 300×300 크기의 박스가 표시됩니다.
버튼을 클릭하면 display() 함수가 실행되고, document.getElementById("box")로 박스 요소를 가져온 뒤 style.borderLeftWidth 속성에 "10px" 값을 할당합니다. 그 결과 왼쪽 테두리만 두께 10픽셀로 변경되어 나머지 세 면과 뚜렷하게 구분됩니다.
참고: 사용 가능한 너비 값
borderLeftWidth 속성에는 다음과 같은 값들을 사용할 수 있습니다.
- 키워드 값:
thin(얇게),medium(보통),thick(굵게) - 길이 단위:
px,em,rem등 (음수 값은 허용되지 않습니다)
이처럼 borderLeftWidth 속성을 활용하면 별도의 CSS 수정 없이 JavaScript만으로 특정 요소의 왼쪽 테두리 두께를 동적으로 제어할 수 있어, 인터랙티브한 UI 효과나 강조 표시 등을 구현할 때 유용합니다.