StyleSheet: media property
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.
Thuộc tính chỉ đọc media của giao diện StyleSheet chứa một đối tượng MediaList đại diện cho phương tiện đích dự kiến cho thông tin định kiểu.
Giá trị
Một đối tượng MediaList. Giá trị của nó được đặt bởi thuộc tính media trên phần tử <link> hoặc <style> tương ứng. Nếu thuộc tính media không được đặt hoặc rỗng, nó trả về một MediaList rỗng, tức là MediaList có thuộc tính length bằng 0.
Mặc dù bản thân thuộc tính media là chỉ đọc theo nghĩa bạn không thể thay thế đối tượng MediaList, bạn vẫn có thể gán trực tiếp cho thuộc tính media, tương đương với việc gán cho thuộc tính mediaText của nó. Bạn cũng có thể sửa đổi đối tượng MediaList bằng các phương thức appendMedium() và deleteMedium().
Ví dụ
Giả sử phần <head> chứa như sau:
<link rel="stylesheet" href="document.css" media="screen" />
<style rel="stylesheet" media="screen, print">
body {
background-color: snow;
}
</style>
Thì:
for (let i = 0; i < document.styleSheets.length; i++) {
console.log(
`document.styleSheets[${i}].media: ${JSON.stringify(
document.styleSheets[i].media,
)}`,
);
if (i === 0) document.styleSheets[i].media.appendMedium("handheld");
if (i === 1) document.styleSheets[i].media.deleteMedium("print");
console.log(
`document.styleSheets[${i}].media: ${JSON.stringify(
document.styleSheets[i].media,
)}`,
);
}
// This will log:
// document.styleSheets[0].media: {"0":"screen"}
// document.styleSheets[0].media: {"0":"screen","1":"handheld"}
// document.styleSheets[1].media: {"0":"screen","1":"print"}
// document.styleSheets[1].media: {"0":"screen"}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Object Model (CSSOM) # dom-stylesheet-media |