如何用JavaScript修改媒体查询中指定元素的width为100% !important？

要修改目标媒体查询中的width样式，有两种常用的JavaScript实现方式：

方式一：动态插入新样式覆盖（推荐） #

这种方法无需查找现有样式表，直接生成新的媒体查询样式插入页面，利用CSS优先级规则覆盖原有样式：

// 创建style元素
const style = document.createElement('style');
// 写入修改后的媒体查询CSS
style.textContent = `
@media only screen and (max-width: 480px) {
    .contentpageDefaultLandingPageTemplate .contentRoot {
        width: 100% !important;
    }
}
`;
// 插入到head标签中
document.head.appendChild(style);

方式二：修改现有样式表规则 #

如果需要直接修改页面中已存在的目标样式规则，可以遍历页面的样式表，找到对应的媒体查询和选择器后修改width属性：

// 遍历所有样式表
for (const sheet of document.styleSheets) {
    try {
        // 遍历当前样式表的所有规则
        for (const rule of sheet.cssRules) {
            // 判断是否是目标媒体查询规则
            if (rule.type === CSSRule.MEDIA_RULE && rule.media.mediaText === 'only screen and (max-width: 480px)') {
                // 遍历媒体查询内的所有样式规则
                for (const mediaRule of rule.cssRules) {
                    // 判断是否是目标选择器
                    if (mediaRule.selectorText === '.contentpageDefaultLandingPageTemplate .contentRoot') {
                        // 修改width属性
                        mediaRule.style.setProperty('width', '100%', 'important');
                        // 找到目标后退出遍历
                        return;
                    }
                }
            }
        }
    } catch (e) {
        // 跨域样式表无法访问，跳过
        continue;
    }
}

说明：方式二需要注意，如果样式表是跨域加载的（比如CDN资源），浏览器会禁止访问其cssRules，此时会抛出异常，需要捕获并跳过。

内容的提问来源于stack exchange，提问作者markjamin