仅能访问JS文件时，如何不注入CSS实现CSS媒体查询调整元素尺寸？

如果只能操作JS文件，不用注入完整CSS代码也能实现基于媒体查询的元素尺寸调整，以下是两种实用方案：

1. 用window.matchMedia监听媒体查询，直接修改元素样式/类名 #

核心是通过JS监听媒体查询的匹配状态，直接操作DOM元素的样式或切换页面已有的预定义类（如果页面里存在相关类样式的话）。

比如监听屏幕宽度小于768px的情况，直接修改目标元素宽度：

// 定义媒体查询规则
const mobileQuery = window.matchMedia('(max-width: 768px)');

// 处理媒体查询状态变化的函数
function handleMediaChange(e) {
  const targetElement = document.getElementById('target-element');
  if (e.matches) {
    // 匹配移动端，设置新宽度
    targetElement.style.width = '100%';
  } else {
    // 回到桌面端，恢复原宽度
    targetElement.style.width = '800px';
  }
}

// 页面加载时先执行一次，确保初始状态正确
handleMediaChange(mobileQuery);
// 监听媒体查询状态变化
mobileQuery.addEventListener('change', handleMediaChange);

如果页面已经有现成的响应式类（比如.mobile-full-width），可以直接切换类来实现样式变化：

function handleMediaChange(e) {
  const targetElement = document.getElementById('target-element');
  if (e.matches) {
    targetElement.classList.add('mobile-full-width');
  } else {
    targetElement.classList.remove('mobile-full-width');
  }
}

2. 通过CSS变量间接控制尺寸 #

如果页面元素的尺寸是用CSS变量定义的（比如--target-width: 800px），可以在JS里根据媒体查询结果动态修改这个变量值，所有使用该变量的元素都会自动更新样式：

const mobileQuery = window.matchMedia('(max-width: 768px)');

function handleMediaChange(e) {
  const root = document.documentElement;
  if (e.matches) {
    root.style.setProperty('--target-width', '100%');
  } else {
    root.style.setProperty('--target-width', '800px');
  }
}

handleMediaChange(mobileQuery);
mobileQuery.addEventListener('change', handleMediaChange);

这两种方法都不需要注入完整的CSS代码块，完全通过JS逻辑实现响应式调整，适合你只能操作脚本文件的场景。

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