JavaScript에서 요소의 상단 테두리(위쪽 테두리) 너비를 설정하려면 borderTopWidth 속성을 사용하면 됩니다. 이 속성에 원하는 픽셀(px) 값을 지정하면 상단 테두리의 두께가 즉시 변경됩니다.
기본 문법
document.getElementById("요소ID").style.borderTopWidth = "너비값";예제
아래 예제 코드를 실행해 보면, 버튼을 클릭했을 때 JavaScript로 상단 테두리의 너비가 어떻게 변경되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">데모 텍스트</div>
<br><br>
<button type="button" onclick="display()">상단 테두리 너비 변경</button>
<script>
function display() {
document.getElementById("box").style.borderTopWidth = "10px";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 파란색 실선 테두리(thick solid blue)가 적용된 300×300 크기의 박스입니다.
- 버튼 클릭: 버튼을 클릭하면
display()함수가 호출됩니다. - borderTopWidth 적용: 함수 내부에서
style.borderTopWidth속성에 "10px"을 할당하여 상단 테두리의 두께가 10픽셀로 변경됩니다.
이처럼 borderTopWidth 속성을 활용하면 CSS를 직접 수정하지 않고도 JavaScript만으로 동적으로 상단 테두리의 두께를 조절할 수 있습니다.