JavaScript에서 borderLeft 속성으로 왼쪽 테두리를 한 번에 설정하는 방법

요소의 왼쪽 테두리와 관련된 모든 속성(두께, 스타일, 색상)을 하나의 선언으로 동시에 설정하려면 borderLeft 속성을 사용하면 됩니다. 이 속성은 CSS의 border-left 단축 속성에 대응하며, JavaScript에서 개별적으로 borderLeftWidth, borderLeftStyle, borderLeftColor를 각각 지정할 필요 없이 한 줄로 처리할 수 있습니다.

예제

아래 코드는 버튼을 클릭하면 박스 요소의 왼쪽 테두리가 검은색 굵은 실선으로 변경되는 예제입니다. 직접 실행해 보면서 borderLeft 속성의 동작 방식을 확인해 보세요.

<!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 left border</button>
      <script>
         function display() {
            document.getElementById("box").style.borderLeft = "thick solid #000000";
         }
      </script>
      
   </body>
</html>

코드 설명

위 예제에서 핵심 부분은 다음 코드입니다.

document.getElementById("box").style.borderLeft = "thick solid #000000";

이 코드는 id가 box인 요소를 선택한 뒤, 해당 요소의 style 객체에 있는 borderLeft 속성에 값을 할당합니다. 값은 공백으로 구분된 세 가지 정보로 구성됩니다.

thick: 테두리의 두께를 지정합니다. (thin, medium, thick 또는 px, em 등의 구체적인 값 사용 가능)
solid: 테두리의 스타일을 지정합니다. (dashed, dotted, double 등 다양한 스타일 사용 가능)
#000000: 테두리의 색상을 지정합니다. HEX 코드 외에 색상 이름이나 rgb() 값도 사용할 수 있습니다.

버튼을 클릭하면 기존의 회색 테두리 중 왼쪽 면만 검은색 굵은 실선으로 바뀌는 것을 확인할 수 있습니다. 이처럼 borderLeft 속성을 활용하면 별도의 CSS 수정 없이 JavaScript만으로 왼쪽 테두리 스타일을 동적으로 변경할 수 있습니다.