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

zvokhttg  于 2022-11-26  发布在  Java
关注(0)|答案(2)|浏览(163)

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

ryevplcw

ryevplcw1#

虽然不太理想,但通过从window.matchMedia()创建一个MediaQueryList对象,并通过侦听事件以查看其更改来设置内联样式,似乎可以做到这一点。
详细指南:MDN
下面是一个针对@media (max-width: 640px)的快速示例:
(Open整页并尝试更改窗口大小以查看效果)
第一个

wwtsj6pe

wwtsj6pe2#

最好的方法是加载托管在您控制的某个地方的样式表,然后让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);
}

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

相关问题