我正在一个已经存在的网页上工作,并希望调整一些元素使用CSS媒体查询,如宽度,但我只能访问脚本文件,有没有办法做到这一点,而不注入CSS在我的js文件?到目前为止,我已经尝试将我的css文件逐行注入到我的js文件中
ryevplcw1#
虽然不太理想,但通过从window.matchMedia()创建一个MediaQueryList对象,并通过侦听事件以查看其更改来设置内联样式,似乎可以做到这一点。详细指南:MDN下面是一个针对@media (max-width: 640px)的快速示例:(Open整页并尝试更改窗口大小以查看效果)第一个
window.matchMedia()
MediaQueryList
@media (max-width: 640px)
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作为参数。
loadStylesheet()
2条答案
按热度按时间ryevplcw1#
虽然不太理想,但通过从
window.matchMedia()
创建一个MediaQueryList
对象,并通过侦听事件以查看其更改来设置内联样式,似乎可以做到这一点。详细指南:MDN
下面是一个针对
@media (max-width: 640px)
的快速示例:(Open整页并尝试更改窗口大小以查看效果)
第一个
wwtsj6pe2#
最好的方法是加载托管在您控制的某个地方的样式表,然后让JavaScript将其加载到所需的页面中。
代码如下所示:
然后调用
loadStylesheet()
,将样式表的URL作为参数。