HTML 요소의 하단 테두리(bottom border) 너비를 설정하려면 JavaScript에서 borderBottomWidth 속성을 사용하면 됩니다. 이 속성을 활용하면 테두리 두께를 동적으로 변경할 수 있어, 버튼 클릭과 같은 사용자 이벤트에 따라 스타일을 실시간으로 조정할 때 매우 유용합니다.
참고로 테두리가 화면에 나타나려면 borderBottomWidth뿐만 아니라 borderBottomStyle 속성도 함께 지정해야 합니다. 테두리 스타일이 설정되어 있지 않으면 기본값이 'none'이기 때문에 너비를 지정해도 보이지 않습니다.
예제
아래 예제 코드를 실행하고 버튼을 클릭하면, div 요소의 하단 테두리가 점선(dashed) 스타일로 적용되며 너비가 5px로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="box">Demo Text</div>
<br>
<button onclick="display()">Click to set width of bottom border</button>
<script>
function display() {
document.getElementById("box").style.borderBottomStyle = "dashed";
document.getElementById("box").style.borderBottomWidth = "5px";
}
</script>
</body>
</html>코드 설명
display() 함수 내부에서 document.getElementById("box")로 해당 요소를 가져온 뒤, style.borderBottomStyle에 "dashed"를 할당해 테두리 스타일을 점선으로 지정하고, style.borderBottomWidth에 "5px"를 할당하여 하단 테두리의 너비를 5픽셀로 설정합니다.