document.styleSheets wird mit einem Index verwendet,
aber was, wenn ich stylesheet.insertRule mit einer bestimmten CSS-Datei verwenden möchte?
get document.styleSheets nach Namen statt nach Index?
Ich kenne den Namen der Datei, die auf einer Seite und irgendwann über JS injiziert wird.
verwenden, und im Kopf behalten:
Aus Sicherheitsgründen, Opera und Mozilla wird nicht zulassen, dass Sie die cssRules Sammlung eines Sheet aus einer anderen Domäne oder Protokoll zuzugreifen. Der Versuch, darauf zuzugreifen wird eine Sicherheitsverletzung Fehler werfen
setStyleRule = function(selector, rule) {
var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
for(var i in document.styleSheets){
if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf("myStyle.css")) {
stylesheet = document.styleSheets[i];
break;
}
}
if(stylesheet.addRule){
stylesheet.addRule(selector, rule);
} else if(stylesheet.insertRule){
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
}
+1 für die erste Note – cprcrack
+1 Genau das, was ich brauche – gumenimeda
@vsync, Sie sagten, dass aus Sicherheitsgründen ist es nicht erlaubt. Warum ist das ein Sicherheitsproblem? Genau, wie kann es missbraucht werden? – Pacerier
Dies geschah aufgrund der Adresse von CSS unterscheidet sich von der Adresse der Seite. Um zu beheben ist nur die beiden haben die eine Adresse.
Hier ist eine kleine Anpassung an die Antwort von 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);
}
}
}
Sobald Sie das DOM-Objekt durch document.getElementById bekommen können Sie das ‚Blatt‘ Eigenschaft die tatsächliche Sheet zuzugreifen. Stellen Sie also sicher, dass Sie eine ID für das styleSheet angeben, das Sie ändern möchten. Auch wenn es sich um eine externe CSS-Datei handelt, geben Sie ihr einfach eine ID.
Und hier ist meine Testseite
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
var
index = 0,
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>
<style id="myStyles">
div
{
border: solid 1px black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button>Click Me</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>
</body>
</html>
Warum so kompliziert? Sie können in dem Dokument ohne Looping durch alle Sheets ein bestimmtes Dokument Sheet von ID oder URL erhalten: var mysheet = $('link#id')[0].sheet; ... oder ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;
Funktioniert perfekt! Aber können Sie erklären, woher Sie wussten, dass der erforderliche Name der Eigenschaft "Blatt" war? – Webars
Ich kann mich nicht erinnern, wo ich es zuerst gesehen habe, aber 'sheet' ist im Prinzip die Eigenschaft, die verwendet wird, um programmgesteuert auf ein Stylesheet zuzugreifen. – suncat100
In der Tat funktioniert ".Sheet" perfekt! Leider gibt es nur wenige Informationen über dieses großartige Anwesen. Die meisten Menschen durchlaufen "document.styleSheets". – Marian07
Ich habe diese questio gefragt, n aber schon dachte an eine Art und Weise um es zu lösen. Ich wollte diese Lösung mit der stackoverflow-Community teilen, für die dies möglicherweise benötigt wird. – vsync