document.styleSheets viene utilizzato con un indice,
ma cosa fare se si desidera utilizzare stylesheet.insertRule con un file CSS specifico?
get document.styleSheets per nome anziché indice?
so il nome del file, che viene iniettato a una pagina e ad un certo punto via JS.
Utilizzare questo, e tenere a mente:
Per motivi di sicurezza, Opera e Mozilla non permetterà di accedere la raccolta cssRules di un foglio di stile da un altro dominio o protocollo. Il tentativo di accedervi sarà lanciare un errore di violazione di sicurezza
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 per la prima nota – cprcrack
+1 Esattamente quello che mi serve – gumenimeda
@ vsync, hai dichiarato che per motivi di sicurezza non è permesso. Perché questo è un problema di sicurezza? Esattamente, come può essere abusato? – Pacerier
Questo è accaduto a causa del l'indirizzo del CSS è diversa l'indirizzo della pagina. Per risolvere è sufficiente fare in modo che entrambi abbiano l'indirizzo.
Ecco una piccola modifica alla risposta di 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);
}
}
}
Una volta che l'oggetto DOM attraverso document.getElementById è possibile utilizzare la proprietà 'foglio' di accedere al styleSheet vero e proprio. Quindi assicurati di fornire un ID per lo styleSheet che desideri modificare. Anche se si tratta di un file CSS esterno, basta dargli un ID.
E qui è la mia pagina di test
<!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>
Perché così complicato? È possibile ottenere un foglio di stile specifico documento per ID o URL senza loop attraverso tutti i fogli di stile nel documento: var mysheet = $('link#id')[0].sheet; ... o ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;
Funziona perfettamente! Ma puoi spiegare, come sapevi, che il nome della proprietà richiesta era "foglio"? – Webars
Non riesco a ricordare dove l'ho visto per la prima volta, ma 'sheet' è fondamentalmente la proprietà utilizzata per accedere a un foglio di stile a livello di codice. – suncat100
Infatti, ".sheet" funziona perfettamente! Purtroppo, ci sono poche informazioni su questa grande proprietà. La maggior parte delle persone passa attraverso "document.styleSheets". – Marian07
Ho chiesto questo Questio, n ma già pensato a un modo per risolverlo Volevo condividere questa soluzione con la comunità StackOverflow, per chi potrebbe aver bisogno di questo. – vsync