Cách thiết lập độ mờ (opacity) cho phần tử với JavaScript

Thuộc tính opacity (CSS opacity) kiểm soát độ trong suốt của phần tử và toàn bộ con cái. Giá trị từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

Ví dụ minh họa

Nhấn nút để đặt opacity = 0.5 cho hộp xám:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 450px;
      background-color: gray;
      padding: 20px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để đặt Opacity.</p>
  <button type="button" onclick="display()">Đặt Opacity</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.opacity = "0.5";
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• opacity ảnh hưởng đến toàn bộ phần tử và con cái.
• Để chỉ làm mờ nền: dùng background-color: rgba(0,0,0,0.5) hoặc pseudo-element.
• opacity: 0 khác visibility: hidden – opacity vẫn chiếm diện tích, nhận event; visibility hidden không nhận event.
• Kết hợp transition: opacity 0.3s cho hiệu ứng fade mượt.