CSSMediaRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Giao diện CSSMediaRule đại diện cho một quy tắc CSS @media duy nhất.

Thuộc tính phiên bản

Kế thừa thuộc tính từ các lớp tổ tiên CSSConditionRule, CSSGroupingRule và CSSRule.

CSSMediaRule.media Read only: Trả về MediaList đại diện cho phương tiện đích dự kiến cho thông tin kiểu.

Phương thức phiên bản

Không có phương thức cụ thể; kế thừa phương thức từ các lớp tổ tiên CSSConditionRule, CSSGroupingRule và CSSRule.

CSS bên dưới bao gồm một media query với một quy tắc kiểu. Cơ sở hạ tầng live sample của MDN kết hợp tất cả các khối CSS trong ví dụ thành một kiểu nội tuyến duy nhất với id css-output, vì vậy chúng ta đầu tiên sử dụng document.getElementById() để tìm sheet đó. myRules[0] trả về đối tượng CSSMediaRule, từ đó chúng ta có thể lấy mediaText.

html

<p id="log"></p>

css

@media (width >= 500px) {
  body {
    color: blue;
  }
}

const log = document.getElementById("log");
const myRules = document.getElementById("css-output").sheet.cssRules;
const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
log.textContent += ` ${mediaList.media.mediaText}`;