2009-11-05 30 views

Odpowiedz

36

użyć tego, i pamiętać:

Ze względów bezpieczeństwa, Opera i Mozilla nie pozwoli na dostęp kolekcję cssRules z stylów z innej domeny lub protokołu . Przystąpieniem do niego dostęp będzie rzucać błąd naruszenia ochrony

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); 
    } 
} 
+3

+1 za pierwszą notatkę – cprcrack

+1

+1 Dokładnie to, czego potrzebuję – gumenimeda

+0

@vsync, Stwierdziłeś, że ze względów bezpieczeństwa jest to zabronione. Dlaczego jest to problem związany z bezpieczeństwem? Dokładnie, jak można go nadużywać? – Pacerier

2

Stało się to ze względu na adres CSS różni się adres strony. Naprawianie polega tylko na tym, żeby oba miały jakiś adres.

3

Oto niewielka korekta odpowiedzi przez 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); 
    } 
    } 
} 

Po uzyskaniu obiektu DOM przez document.getElementById można użyć „arkusz” właściwość, aby uzyskać dostęp do rzeczywistej arkusza stylów. Dlatego upewnij się, że podałeś identyfikator arkusza stylów, który chcesz zmienić. Nawet jeśli jest to zewnętrzny plik CSS, wystarczy podać identyfikator.

A oto moja strona testowa

<!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> 
16

Dlaczego tak skomplikowane? Można uzyskać konkretną stylów dokumentu przez ID lub adresu URL bez zapętlenie przez wszystkich stylów w dokumencie: var mysheet = $('link#id')[0].sheet; ... albo ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;

+1

Działa idealnie! Ale czy możesz wyjaśnić, skąd wiedziałeś, że wymagana nazwa nieruchomości to "arkusz"? – Webars

+1

Nie pamiętam miejsca, w którym pierwszy raz to zobaczyłem, ale 'sheet' jest po prostu właściwością używaną do programistycznego dostępu do arkusza stylów. – suncat100

+1

Rzeczywiście, ".sheet" działa idealnie! Niestety, istnieje niewiele informacji na temat tej wspaniałej nieruchomości. Większość ludzi przegląda "document.styleSheets". – Marian07

Powiązane problemy