document.styleSheets与索引一起使用,
但是如果我想将stylesheet.insertRule用于特定的CSS文件呢?
我知道文件的名称,它被注入页面,并在某些时候通过JS。
答案 0 :(得分:42)
使用此功能,请记住:
出于安全考虑,Opera和 Mozilla不允许您访问 一个cssRules集合 来自另一个域的样式表或 协议。试图访问它会 抛出安全违规错误
setStyleRule = function(selector, rule, sheetName="myStyle") {
var sheets = document.styleSheets,
stylesheet = sheets[(sheets.length - 1)];
for( var i in document.styleSheets ){
if( sheets[i].href && sheets[i].href.indexOf(sheetName + ".css") > -1 ) {
stylesheet = sheets[i];
break;
}
}
if( stylesheet.addRule )
stylesheet.addRule(selector, rule);
else if( stylesheet.insertRule )
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
答案 1 :(得分:22)
为什么这么复杂?您可以按ID或URL获取特定的文档样式表,而无需遍历文档中的所有样式表:
var mysheet = $('link#id')[0].sheet;
... 要么 ...
var mysheet = $('link[href="/css/style.css"]')[0].sheet;
答案 2 :(得分:4)
这是对vsync的回答的一个小调整。
function addRule(stylesheetId, selector, rule) {
var stylesheet = document.getElementById(stylesheetId);
if (stylesheet) {
stylesheet = stylesheet.sheet;
if (stylesheet.addRule) {
stylesheet.addRule(selector, rule);
} else if (stylesheet.insertRule) {
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
}
通过document.getElementById获取DOM对象后,您可以使用'sheet'属性访问实际的styleSheet。因此,请确保为要更改的样式表提供ID。即使它是外部CSS文件,也只需给它一个ID。
这是我的测试代码:
var index = 0;
var items = [
{ selector: "h1", rules: "color:#3333BB;font: bold 18px Tahoma;padding: 12px 0 0 0;" },
{ selector: "p", rules: "padding:0;margin:0;background-color:#123456;color:#ABCDEF;"},
{ selector: "b", rules: "font-weight:normal;"},
{ selector: "i", rules: "color:#66FF66;" }
];
function addRule(stylesheetId, selector, rule) {
var stylesheet = document.getElementById(stylesheetId);
if (stylesheet) {
stylesheet = stylesheet.sheet;
if (stylesheet.addRule) {
stylesheet.addRule(selector, rule);
} else if (stylesheet.insertRule) {
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
}
$(document).ready(function () {
$("button").click(function () {
addRule("myStyles", items[index].selector, items[index].rules);
index++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style id="myStyles">
div
{
border: solid 1px black;
width: 300px;
height: 300px;
}
</style>
<button>Click Me 4 times slowly</button>
<div>
<h1>test</h1>
<p>Paragraph One</p>
<p>Paragraph with <b>bold</b> and <i>Italics</i></p>
<p>Paragraph 3</p>
</div>
答案 3 :(得分:2)
这是因为CSS的地址与页面的地址不同。 修复只是让两者都有一些地址。
答案 4 :(得分:0)
没有jquery:
function addRule(stylename, selector, rule) {
var stylesheet = document.querySelector(`link[href$="${stylename}.css"]`)
if( stylesheet.addRule )
stylesheet.addRule(selector, rule);
else if( stylesheet.insertRule )
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
// example use
addRule('styles.css', '.color', 'red')