Web StyleElement API | StyleElement 媒体属性

简介

StyleElement 是 Web API 中的一部分，它的作用是用来在 HTML 中动态地添加样式。除了一些基本的属性之外，StyleElement 还有一些媒体属性，可以让样式表只应用于特定的设备或场合。

媒体属性

media

media 属性用来指定样式表适用的设备类型或环境。它接受一个字符串类型的参数，用逗号分隔，可以同时适用多个设备或环境。如下所示：

<style media="screen and (max-width: 600px)">
    /* 在屏幕宽度小于等于 600px 时应用这个样式 */
</style>

type

type 属性被用来指定样式表的类型。在 HTML4 中，样式表必须使用 type="text/css"。在 HTML5 中则可以省略该属性，因为它默认为 text/css。不过，除了 text/css 之外，还有其他一些可能的值，如下所示：

• text/css
• text/javascript
• text/plain
• application/xslt+xml

title

title 属性用来指定样式表的标题。它可以被用作脚本（如 JavaScript）中特定样式表的标识符。

<style title="my_style">
    /* 这是 id 为 "my_style" 的样式表 */
</style>

如何使用

// 创建一个 <style> 元素
const style = document.createElement('style');
// 设置 media 属性
style.media = 'screen and (max-width: 600px)';
// 设置 type 属性
style.type = 'text/css';
// 添加样式规则
style.innerHTML = `
    body {
        background-color: #ccc;
    }
`;
// 将 <style> 元素添加到文档中
document.head.appendChild(style);

以上代码会创建一个