CSSContainerRule: thuộc tính containerName

Giá trị

Một chuỗi chứa container-name của @container liên kết với CSSContainerRule này. Nếu @container không có tên, hàm trả về chuỗi rỗng ("").

Ví dụ

Ví dụ dưới đây định nghĩa một quy tắc @container có tên, và hiển thị các thuộc tính của CSSContainerRule liên kết. CSS rất giống với ví dụ @container Tạo ngữ cảnh container được đặt tên.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

Đầu tiên chúng ta định nghĩa HTML cho một card (<div>) được chứa trong một post.

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

CSS cho phần tử container chỉ định loại container, và cũng có thể chỉ định tên. Card có cỡ chữ mặc định, được ghi đè cho @container tên sidebar nếu chiều rộng lớn hơn 700px.

<style id="example-styles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (width >= 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

Code dưới đây lấy HTMLStyleElement liên kết với ví dụ bằng id của nó, sau đó sử dụng thuộc tính sheet để lấy StyleSheet. Từ StyleSheet, chúng ta lấy tập hợp cssRules được thêm vào sheet. Vì chúng ta đã thêm @container làm quy tắc thứ ba ở trên, chúng ta có thể truy cập CSSContainerRule liên kết bằng mục nhập thứ ba (chỉ số "2"), trong cssRules. Cuối cùng, chúng ta ghi lại các thuộc tính tên container và truy vấn (code thực hiện ghi log không được hiển thị).

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);

Kết quả ví dụ được hiển thị bên dưới. Phần log liệt kê chuỗi tên container. Tiêu đề trong phần card sẽ tăng gấp đôi kích thước khi chiều rộng của trang vượt qua 700px.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính viết tắt CSS container
• Mô-đun CSS containment
• Truy vấn container
• Sử dụng truy vấn kích thước và kiểu container