document.styleSheets, bir dizini
ile birlikte kullanılır, ancak ne stylesheet.insertRule'u belirli bir CSS dosyasıyla kullanmak istersem?
document.styleSheets yerine dizin yerine?
Dosyanın adını, bir sayfaya ve belirli bir noktadan JS'ye enjekte ettiğini biliyorum.
kullanın bu ve akılda tutulması:
Güvenlik nedenleriyle, Opera ve Mozilla başka etki alanı veya protokolünden bir stil cssRules koleksiyonuna erişmek için izin vermeyecektir. erişmek için çalışılıyor bir güvenlik ihlali hatayı
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 ilk not için – cprcrack
+1 – gumenimeda
@vsync'ye ihtiyacım olan tam olarak, Güvenlik nedeniyle izin verilmediğini belirttiniz. Bu neden bir güvenlik sorunu? Tam olarak nasıl kötüye kullanılabilir? – Pacerier
atacağım Bunun nedeni CSS adresi oldu sayfasının adrese ait farklıdır. Düzeltmek için her ikisinin de bir adresi var.
İşte cevap ile vsync küçük bir ayardır. Eğer document.getElementById aracılığıyla DOM nesnesi aldıktan sonra
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);
}
}
}
gerçek stil sayfasını erişmek için 'levha' özelliğini kullanabilirsiniz. Bu yüzden sadece değiştirmek istediğiniz styleSheet için bir kimlik sağladığınızdan emin olun. Harici bir CSS dosyası olsa bile, sadece bir ID verin.
Ve burada benim test sayfası Neden bu kadar karmaşık
<!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>
mı? Belgedeki tüm stil döngü olmadan kimliği veya URL belirli belge stil elde edebilirsiniz: ... var mysheet = $('link#id')[0].sheet; ... ya var mysheet = $('link[href="/css/style.css"]')[0].sheet;
Mükemmel çalışıyor! Ancak, nasıl bildiğinizi, gerekli özellik adının "sayfa" olduğunu açıklayabilir misiniz? – Webars
İlk gördüğüm yeri hatırlayamıyorum, ancak 'sheet' temelde programlı olarak bir stil sayfasına erişmek için kullanılan özellik. – suncat100
Gerçekten, ".sheet" mükemmel çalışıyor! Ne yazık ki, bu büyük mülk hakkında birkaç bilgi var. Çoğu kişi "document.styleSheets" ile döngü yapar. – Marian07
bu soruyu yanıtlamalarını istedi n ancak zaten yolu olmali çözmek için. Bu çözüme, ihtiyaç duyabileceği stackoverflow topluluğuyla paylaşmak istedim. – vsync