files/en-us/web/api/cssmediarule/media/index.md
{{ APIRef("CSSOM") }}
The read-only media property of the {{domxref("CSSMediaRule")}} interface contains a {{domxref("MediaList")}} object representing the media query list of the {{cssxref("@media")}} rule.
A {{domxref("MediaList")}} object.
Although the media property itself is read-only in the sense that you can't replace the MediaList object, you can still assign to the media property directly, which is equivalent to assigning to its {{domxref("MediaList/mediaText", "mediaText")}} property. You can also modify the MediaList object using the {{domxref("MediaList/appendMedium", "appendMedium()")}} and {{domxref("MediaList/deleteMedium", "deleteMedium()")}} methods.
The CSS includes a media query with one style rule. This will be the first
{{domxref("CSSRule")}} returned by document.styleSheets[0].cssRules.
Calling myRules[0].media therefore returns a {{domxref("MediaList")}}
object representing the media query.
@media (width >= 500px) {
body {
color: blue;
}
}
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // a MediaList
{{Specifications}}
{{Compat}}