如何使用JavaScript修改@media screen媒体查询中的CSS样式？

一、修改普通CSS样式值 #

日常开发里常用两种方式：

• 修改元素行内样式：直接操作元素的style属性，这种方式会给元素添加行内样式，优先级较高，适合单个元素的样式调整。示例：

// 获取目标元素
const targetEl = document.getElementById('target');
// 修改背景色
targetEl.style.backgroundColor = '#f0f0f0';
// 修改字体大小（用驼峰命名替代CSS中的连字符）
targetEl.style.fontSize = '16px';

• 操作全局样式表：找到页面中的样式表，修改其中的规则，这种方式会影响所有匹配该选择器的元素。示例：

// 获取页面第一个样式表
const styleSheet = document.styleSheets[0];
// 遍历规则找到目标选择器
for (let i = 0; i < styleSheet.cssRules.length; i++) {
  const rule = styleSheet.cssRules[i];
  if (rule.selectorText === '.box') {
    // 修改文字颜色
    rule.style.color = 'red';
    break;
  }
}

二、在@media screen媒体查询中添加或修改样式 #

要操作媒体查询里的样式，核心是定位到对应的CSSMediaRule对象，再对其内部规则进行修改：

1. 修改已存在的媒体查询规则 #

// 遍历页面所有样式表
for (const sheet of document.styleSheets) {
  // 遍历样式表内的每一条规则
  for (const rule of sheet.cssRules) {
    // 判断是否为屏幕媒体查询规则
    if (rule.type === CSSRule.MEDIA_RULE && rule.media.mediaText.includes('screen')) {
      // 遍历媒体查询内的具体样式规则
      for (const mediaRule of rule.cssRules) {
        // 找到目标选择器后修改样式
        if (mediaRule.selectorText === '.responsive-box') {
          mediaRule.style.width = '80%';
          mediaRule.style.margin = '0 auto';
        }
      }
    }
  }
}

2. 新建媒体查询并添加样式 #

如果页面中没有对应的媒体查询，可以直接创建规则插入到样式表中：

const styleSheet = document.styleSheets[0];
// 定义媒体查询及内部样式
const mediaQueryContent = '@media screen and (max-width: 768px) { .responsive-box { padding: 10px; } }';
// 将规则插入到样式表末尾
styleSheet.insertRule(mediaQueryContent, styleSheet.cssRules.length);

注意点 #

• 跨域加载的样式表无法通过JavaScript操作，受浏览器同源策略限制。
• 修改样式表规则时要注意优先级，避免和现有样式产生意料之外的冲突。

内容的提问来源于stack exchange，提问作者New York is my city