JavaScript로 요소 테두리 색상 설정하는 방법

JavaScript에서 요소 테두리의 색상을 변경하려면 borderColor 속성을 사용하면 됩니다. 이 속성은 DOM 요소의 style 객체를 통해 접근할 수 있으며, 색상 이름(green, red 등), HEX 코드(#00ff00), RGB 값(rgb(0,255,0)) 등 CSS에서 지원하는 다양한 색상 값을 지정할 수 있습니다.

borderColor 사용 시 주의사항

borderColor가 화면에 실제로 적용되려면 해당 요소에 border-style(solid, dashed 등)과 border-width가 먼저 설정되어 있어야 합니다. 테두리 스타일이 지정되어 있지 않으면 색상을 변경해도 화면에는 아무런 변화가 나타나지 않습니다.

예제

다음 코드를 실행해 보세요. 버튼을 클릭하면 노란색 점선 테두리가 초록색으로 변경됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            height: 300px;
            width: 200px;
            border: thick dashed yellow;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
      </div>
      <br>
      <button type="button" onclick="display()">테두리 색상 변경</button>
      <script>
         function display() {
            document.getElementById("box").style.borderColor = "green";
         }
      </script>
   </body>
</html>

코드 설명

CSS 부분: #box 선택자로 가로 200px, 세로 300px 크기의 박스를 만들고, border: thick dashed yellow;를 통해 굵은 노란색 점선 테두리를 미리 적용했습니다.
버튼 클릭: 버튼을 클릭하면 onclick 이벤트에 의해 display() 함수가 호출됩니다.
색상 변경: 함수 안의 document.getElementById("box").style.borderColor = "green"; 코드가 실행되면서 테두리 색상이 초록색으로 즉시 변경됩니다.

이처럼 borderColor 속성을 활용하면 별도의 CSS 수정 없이 JavaScript만으로 동적으로 테두리 색상을 제어할 수 있습니다.