我正在使用CMS来阻止我们编辑头部.我需要在标记后面的网站上添加css样式表.有没有办法用JS做到这一点,我可以在页面底部添加一个脚本(我有权在标签之前添加脚本),然后将样式表注入head部分?
我有一个带有媒体查询的style.css.在我的javascript文件中,我有一个存储在变量中的所需移动宽度的值.
通过更改变量,我想自动更改媒体查询的值.是否有可能用javascript更改.css文件的内容,就像我可以更改DOM一样?<style>使用javascript向DOM 添加HTML 元素不是我想要的解决方案,因为我想将所有css保存在.css文件中
所以我有以下代码
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
document.styleSheets[0].cssRules[0].style.color="blue";
</script>
</head>
//etc.
Run Code Online (Sandbox Code Playgroud)
所以基本上这个代码适用于IE和Mozilla,但不适用于Chrome.实际上,当你运行document.styleSheets[0].cssRules它时会返回一个CSSRulesList对象(在IE和Mozilla中),但在Chrome中它返回null.顺便说一句,对于嵌入式样式,这个对象似乎甚至可以在Chrome中运行.
那么这个功能在Chrome中实际上不可用吗?如果是这样,是否有Chrome替代方案可让您使用Javascript处理外部样式表/文件?
我在样式表中设置了一些CSS自定义属性:
:root {
--bc: #fff;
--bc-primary: #eee;
--bc-secondary: #ddd;
}
Run Code Online (Sandbox Code Playgroud)
如果我已经知道CSS变量的名称,我可以单独检索它们:
console.log(getComputedStyle(document.body).getPropertyValue('--bc'));
// #fff
Run Code Online (Sandbox Code Playgroud)
但是,如果我想将CSS变量及其值的列表拉出来,那该怎么办呢?
当我检查一个网站时,
我看到了来自的cssRulesdocument.styleSheets[x].cssRules
但是,有了这个网站stackoverflow.com,当我用Chrome浏览器检查时,我看到了document.styleSheets,但是cssRules为空.
怎么可能呢?