Cách đặt màu viền trên (top border) bằng JavaScript

Để thiết lập màu cho viền trên của một phần tử trong JavaScript, bạn sử dụng thuộc tính borderTopColor. Thuộc tính này cho phép bạn thay đổi màu sắc của đường viền phía trên mà không ảnh hưởng đến các cạnh khác.

Ví dụ minh họa

Chạy đoạn mã sau để xem cách thay đổi màu viền trên khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 200px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="box">Văn bản demo</div>
  <br><br>
  <button type="button" onclick="changeTopBorderColor()">Đổi màu viền trên</button>
  <script>
    function changeTopBorderColor() {
      document.getElementById("box").style.borderTopColor = "green";
    }
  </script>
</body>
</html>

Giải thích: Khi nhấn nút, hàm changeTopBorderColor() sẽ truy xuất phần tử có id="box" và gán giá trị "green" cho style.borderTopColor. Viền trên sẽ chuyển từ màu xám sang màu xanh lá.

Lưu ý thêm

• Thuộc tính borderTopColor chỉ hoạt động nếu viền đã được định nghĩa (có border-style khác none).
• Bạn có thể dùng các giá trị màu hợp lệ: tên màu (red, blue), mã hex (#ff0000), RGB (rgb(255,0,0)), RGBA, HSL, v.v.
• Để đặt lại về màu mặc định, gán giá trị "" (chuỗi rỗng) hoặc "initial".