JavaScript에서 HTML 요소의 테두리(border) 너비를 설정하려면 borderWidth 속성을 사용하면 됩니다. 이 속성에 원하는 값을 지정하기만 하면 요소의 테두리 두께를 자유롭게 변경할 수 있습니다.
테두리 너비는 "thin", "medium", "thick"과 같은 키워드 값으로 지정할 수 있으며, px나 em 같은 단위를 사용해 세밀하게 조절할 수도 있습니다.
아래 예제 코드를 직접 실행하면서 요소의 테두리 너비를 설정하는 방법을 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px
}
</style>
</head>
<body>
<div id = "box">Demo Text</div>
<br>
<br>
<button type = "button" onclick = "display()">Change border width</button>
<script>
function display() {
document.getElementById("box").style.borderWidth = "thin";
}
</script>
</body>
</html>
코드 설명
위 예제에서는 회색 실선의 두꺼운(thick) 테두리를 가진 박스를 먼저 만듭니다. 그다음 버튼을 클릭하면 display() 함수가 호출되고, document.getElementById()로 선택한 요소의 style.borderWidth 값이 "thin"으로 변경되어 테두리가 얇아지는 것을 확인할 수 있습니다.
이처럼 borderWidth 속성을 활용하면 사용자의 클릭이나 특정 이벤트에 반응하여 동적으로 테두리 스타일을 바꾸는 인터랙티브한 웹 페이지를 쉽게 구현할 수 있습니다.