在JavaScript文件中使用CSS媒体查询

Question

我正在一个已经存在的网页上工作，并希望使用CSS媒体查询如宽度调整一些元素，但我只能访问脚本文件，有没有办法做到这一点，而不注入CSS在我的js文件?

到目前为止，我已经尝试在我的js文件中逐行注入我的css文件

Answer 1

虽然不太理想，但似乎可以通过从window.matchMedia()创建MediaQueryList对象，并通过侦听事件来设置内联样式。

详细指南:MDN

下面是一个针对@media (max-width: 640px)的快速示例:

(打开整个页面并尝试更改窗口大小以查看效果)

const body = document.querySelector("body");
const title = document.querySelector("h1");
const media = window.matchMedia("(max-width: 640px)");
body.style.background = media.matches ? "pink" : "lightgreen";
title.innerText = "Open full page and try change window size";
media.addEventListener("change", (event) => {
if (event.matches) {
body.style.background = "pink";
title.innerText = `Matching: ${media.media}`;
}
if (!event.matches) {
body.style.background = "lightgreen";
title.innerText = `Not matching: ${media.media}`;
}
});

<h1></h1>

Answer 2

最好的方法是加载一个托管在你控制的地方的样式表，然后让JavaScript将它加载到你想要的页面中。

代码看起来像:

function loadStylesheet( absPath ) {
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = absPath;
linkElement.type = "text/css";
const head =  document.head || document.querySelector('head');
head.insertAdjacentElement('beforeend', linkElement);
}

然后使用样式表的URL作为参数调用loadStylesheet()。