JavaScript로 왼쪽 테두리 스타일 설정하기
JavaScript에서 요소의 왼쪽 테두리 스타일을 변경하려면 borderLeftStyle 속성을 사용합니다. 이 속성에 원하는 테두리 스타일 값을 지정하면 되는데, 대표적인 값으로는 solid(실선), dashed(파선), dotted(점선), double(이중선) 등이 있습니다.
사용 가능한 주요 값은 다음과 같습니다.
- solid — 실선
- dashed — 파선(긴 점선)
- dotted — 점선
- double — 이중선
- groove / ridge / inset / outset — 입체적인 효과의 테두리
- none / hidden — 테두리 없음
예제 코드
아래 예제는 버튼을 클릭하면 박스의 왼쪽 테두리 스타일이 dashed로 변경되는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!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.borderLeftStyle = "dashed";
}
</script>
</body>
</html>코드 설명
CSS에서 #box 요소에 처음에는 두꺼운 회색 실선(thick solid gray) 테두리가 적용되어 있습니다. 버튼을 클릭하면 display() 함수가 호출되고, document.getElementById("box").style.borderLeftStyle = "dashed"; 구문을 통해 왼쪽 테두리만 파선 스타일로 동적으로 변경됩니다.
이처럼 JavaScript의 style 객체를 활용하면 페이지 새로고침 없이 사용자 인터랙션에 따라 특정 테두리 스타일을 실시간으로 조작할 수 있습니다.