cómo obtener un objeto CSSStyleSheet desde un elemento HTMLStyleElement

¿Es posible obtener el objeto CSSStyleSheet (document.styleSheets[0]) desde un HTMLStyleElement (document.createElement('style'))?cómo obtener un objeto CSSStyleSheet desde un elemento HTMLStyleElement

Me gustaría agregar dinámicamente reglas css a un elemento <style> no insertado en el documento-yet.

Fuente

2012-01-18 Franck Freiburger

Aquí tienes la respuesta: [http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript][1] [ 1]: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – netadictos

gracias netadictos, pero el tema es ligeramente diferente –

Creo que puede clonar el documento eliminar el hojas de estilo del clon y agregue el nuevo, obtenga el objeto y elimine el clon del documento nuevamente. – noob

Usted can agregue las reglas antes de agregar el elemento de estilo al documento.

Un par notas-

navegadores más antiguos es decir, no se puede añadir nodos secundarios de un elemento de estilo, por lo que asignar a styleSheet.csstext la propiedad del elemento para ellos. Asegúrese de agregar el nuevo elemento al encabezado del documento.

function addStyle(css, media1, title1){ 
    var el= document.createElement('style'); 
    el.type= 'text/css'; 
    if(media1) el.media= media1; 
    if(title1) el.title= title1; 
    if(el.styleSheet) el.styleSheet.cssText= css;//IE 
    else{ 
     el.appendChild(document.createTextNode(css)); 
    } 
    //return el without the next line if you want to append it later 
    return document.getElementsByTagName('head')[0].appendChild(el); 

} 

var cs1= [ 
    '#yw_psq, #yw_psq h2{background-color: green; color: white;}', 
    '#yw_psq_div{margin: 1ex; position: relative; text-align: center;}', 
    '#ps_counter{color: white; margin: 1ex 0 0 0; text-align: center;}', 
    '#pzsq_grid button{cursor: pointer; font-size: 1.2em; width: 100%;}', 
    '#delaySpan{font-weight: bold; margin-left: 1em;}' 
] 

addStyle(cs1.join('\n'),'screen','yw_psq');

Fuente

2012-01-18 16:58:15 kennebec

'document.createElement (" style ")' no funcionará en los documentos XHTML5 porque creará un elemento sin espacio de nombres, lo que significa que el elemento solo heredará sus propiedades de la interfaz HTMLElement y, por lo tanto, será básicamente un elemento en blanco sin propiedades especiales Para solucionar este problema, debe usar 'document.createElementNS (" http://www.w3.org/1999/xhtml "," style ")' para que funcione en documentos XHTML5. –

Si tiene acceso al elemento que se va a insertar, puede agregar información de estilo al igual que cualquier otro elemento. Una vez que se inserta el elemento, el navegador volverá a fluir la página y recogerá las reglas de CSS relevantes que correspondan. No necesita acceder a la hoja de estilo para darle estilo a un elemento, solo necesita acceder al elemento.

Fuente

2012-01-18 16:36:59 cdeszaq

Así es como me suelen MITH mi javascript para crear un nuevo estilo de la ficha técnica y para obtener su CSSStyleSheet objeto mycss (en lugar de la HTMLStyleElement devuelto por appendChild):

document.head.appendChild(document.createElement("style")).setAttribute("type", "text/css"); 
var mycss = document.styleSheets[document.styleSheets.length-1];

entonces aquí es ¿Cómo agrego reglas de estilo a la misma:

mycss.insertRule("css, selectors { cool: styles; and: stuff; }", mycss.cssRules.length);

Espero que esto ayude.

Fuente

2014-06-20 17:11:26 jesus2099

Es es posible obtener un objeto CSSStyleSheet de un elemento <style>.

var style = document.createElement('style'); 
document.head.appendChild(style); 
var styleSheet = style.sheet // Will give you the associated CSSStyleSheet

Esto sólo funcionará después<style> el elemento se ha anexado al documento.

No está excepcionalmente bien documentado y es muy difícil de encontrar hurgando en la consola.

Fuente

2014-07-09 19:25:03

Creo que podría moverse aplicando al documento principal primero haciendo otro: 'var newDoc = document.implementation.createHTMLDocument(); newDoc.head.appendChild (myStyleElement) '.En FF, aparentemente es suficiente para obtener 'newDoc.styleSheets [0] .cssRules', pero Chrome estaba regresando indefinido, así que tuve que obtener myStyleElement como un elemento, luego pude agregar' .sheet.cssRules'. (No he visto otros navegadores, ya que mi proyecto es solo un usuario). Pero sí, ¡qué locura que pude encontrar sobre esta propiedad '.sheet'! –

cómo obtener un objeto CSSStyleSheet desde un elemento HTMLStyleElement

Respuesta

Cuestiones relacionadas