obtener document.styleSheets por nombre en lugar de índice?

document.styleSheets se utiliza con un índice,
, pero ¿qué ocurre si quiero usar stylesheet.insertRule con un archivo CSS específico?
obtener document.styleSheets por nombre en lugar de índice?

sé el nombre del archivo, que se inyecta a una página y en algún momento a través de JS.

Fuente

2009-11-05 vsync

le he pedido a este cuestio, n, pero ya se pensaba en una forma para resolverlo Quería compartir esta solución con la comunidad stackoverflow, para quién podría necesitar esto. – vsync

Uso esto, y tener en cuenta:

Por razones de seguridad, Opera y Mozilla no le permitirá acceder a la colección cssRules de una hoja de estilo de otro dominio o protocolo. El intento de acceder a él le lanzar un error de violación de la seguridad

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

Fuente

2009-11-05 10:17:30 vsync

1 para la primera nota – cprcrack

1 Exactamente lo que necesito – gumenimeda

@vsync, usted declaró que por razones de seguridad, no está permitido. ¿Por qué es esto un problema de seguridad? Exactamente, ¿cómo se puede abusar? – Pacerier

Esto sucedió debido a la dirección de la CSS es diferente de la dirección de la página. Para arreglar es solo hacer que ambos tengan alguna dirección.

Fuente

2011-05-31 13:20:06 Vitor

Aquí está una pequeña modificación de la respuesta por 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 vez que el objeto DOM a través document.getElementById se puede utilizar la propiedad 'hoja' para acceder a la hoja de estilo real. Así que asegúrese de proporcionar una identificación para la hoja de estilo que desea cambiar. Incluso si es un archivo CSS externo, solo dale una identificación.

Y aquí es mi página de prueba

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

Fuente

2012-03-06 19:32:55 Intervalia

¿Por qué tan complicado? Puede obtener una hoja de estilo de documento específico por ID o URL sin bucle a través de todas las hojas de estilo en el documento: var mysheet = $('link#id')[0].sheet; ... o ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;

Fuente

2015-01-21 17:44:53 suncat100

¡Funciona a la perfección! ¿Pero puede explicar, cómo lo sabía, que el nombre de propiedad requerido era "hoja"? – Webars

No puedo recordar donde vi por primera vez, pero 'sheet' es básicamente la propiedad utilizada para acceder a una hoja de estilo mediante programación. – suncat100

De hecho, ".sheet" funciona perfectamente! Lamentablemente, hay pocas informaciones sobre esta gran propiedad. La mayoría de las personas recorre "document.styleSheets". – Marian07

obtener document.styleSheets por nombre en lugar de índice?

Respuesta

Cuestiones relacionadas