Javascript: ¿Puedo crear dinámicamente un objeto CSSStyleSheet e insertarlo?

Sé document.styleSheets que consta de todas las hojas de estilo válidas en una página. Quiero saber si puedo crear uno nuevo y anexarlo a la lista actual a través de javascript.Javascript: ¿Puedo crear dinámicamente un objeto CSSStyleSheet e insertarlo?

document.styleSheets[0].constructor He tratado, document.styleSheets[0].__proto__.constructor, new CSSStyleSheet, CSSStyleSheet(), todas lo que recibo de Chrome es TypeError: Illegal constructor. CSSStyleSheet.constructor() devolvió un objeto puro pero espero un objeto CSSStyleSheet.

Sé que puedo crear un elemento de enlace/estilo y anexarlo, luego modificarlo. Lo que quiero saber es si puedo crear dicho objeto directamente con javascript.

Fuente

2011-11-21 ayanamist

http: //stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript –

simplemente crea un nuevo elemento 'style' y añádelo. se creará una nueva 'CSSStyleSheet'. – Shea

Por lo Lo sé, el único enfoque que se acerca a lo que está pidiendo es el IE-onlydocument.createStyleSheet([url] [,index]) método que puede usar para crear hasta 31 ^*styleSheet objetos (después de lo cual deberá crear manualmente los elementos style y anexarlos al document).

This answer muestra cómo se puede definir el método createStyleSheet() para los navegadores no-IE, pero como era de esperar lo hace añadiendo link/style elementos (que por alguna razón que usted está tratando de evitar).

^* IE 6 a 9 se limita a 31 hojas de estilo importadas due to 5-bit field used for storing sheet IDs. En IE10 este límite se ha elevado a 4095.

Fuente

2011-11-21 10:08:30

_ * Parpadeo * _. IE todavía continúa impresionándome. –

Si usted está tratando de escribir el css interior de Javascript, hacer esto:

var s = document.createElement('style'); 
s.type = 'text/css'; 
s.innterText = 'body { background: #222; } /*... more css ..*/'; 
document.head.appendChild(s);

Mientras que si usted está tratando de cargar una hoja de estilo desde el servidor:

var s = document.createElement('link'); 
s.type = 'text/css'; 
s.rel = 'stylesheet'; 
s.href = '/url/to/css/file.css'; 
document.head.appendChild(s);

Fuente

2011-11-21 08:41:43 regality

Lo siento, pero he dicho que conozco este método. Me pregunto si puedo crear este objeto directamente con javascript o no. – ayanamist

uuhhhh .... esto es javascript, amigo. Qué quieres decir exactamente? – regality

No use 'innerText', no es parte de ningún estándar y no tiene compatibilidad total con el navegador. Use 's.appendChild (document.createTextNode (styles))' para la compatibilidad completa. –

¿Te ha intentar esto:

var myCSSStyleSheetIbj = Object.create(document.styleSheets[0])

Suponiendo que document.styleSheets [0] es un Objeto CSSStyleSheet, En realidad si se reemplaza document.styleSheets [0] con cualquier CSSStyleSheet funcionaría.

Fuente

2013-02-05 15:15:32 StaticBug

Para crear un objeto * empty *, quizás prefiera usar 'Object.create (Object.getPrototypeOf (document.styleSheets [0]))' aquí, pero no parece que sea posible agregar el objeto. –

Genial, pero una vez que lo creo, ¿cómo lo inserto en mi documento? –

Sí, puedes. El document.styleSheets no se puede modificar directamente, pero se puede añadir una entrada mediante la adición de una nueva etiqueta de estilo a su documento:

// Create the style element 
var elem = $('<style id="lwuiStyle"></style>'); 
$('head').append(elem); 

// Find its CSSStyleSheet entry in document.styleSheets 
var sheet, 
    yourSheet = null; 
for (var sid in document.styleSheets) { 
    if (document.styleSheets.hasOwnProperty(sid)) { 
     sheet = document.styleSheets[sid]; 
     if (sheet.ownerNode == elem[0]) { 
      yourSheet = sheet; 
      break; 
     } 
    } 
} 

// Test it by changing the background colour 
yourSheet.insertRule('body {background-color: #fa0}', yourSheet.cssRules.length);

Si ejecuta Firefox, puede probar directamente esto en memoria de apuntes: Copia el código, pulse Shift+F4, pégalo y ejecuta el código con Ctrl+L. ¡Que te diviertas!

Fuente

2013-07-02 10:18:43

Object.create(CSSStyleSheet.prototype)

le devuelve una instancia vacía de CSSStyleSheet. En otras palabras, hace exactamente lo que esperaría que hiciera new CSSStyleSheet.

Object.create está disponible en cualquier navegador con soporte ECMAScript 5. Encuentre una tabla de compatibilidad here.

Fuente

2014-02-17 00:18:45 daluege

¿Quizás puedas dar más detalles? ¿En lugar de publicar una línea de código bastante críptico? – Carpetsmoker

Es la respuesta a la pregunta, por lo que cualquier comentario habría sido innecesario a mis ojos. La declaración devuelve una nueva instancia de CSSStyleSheet y eso es todo. – daluege

Genial, ahora tengo un objeto nuevo, ¿cómo lo inserto en mi documento? –

Sé que dijiste que no querías crear un elemento, pero esa es realmente la única manera de hacerlo. Unas pocas personas han detallado este enfoque anterior, pero noto que nadie cubierta fuera que HTMLStyleElement y HTMLLinkElement ambos tienen una ordenada sheet property para obtener acceso directo a su CSSStyleSheet:

var style = document.createElement("style"); 
document.head.appendChild(style); // must append before you can access sheet property 
var sheet = style.sheet; 

console.log(sheet instanceof CSSStyleSheet);

mucho más simple que la búsqueda a través document.styleSheets

Fuente

2014-06-18 12:44:10 WickyNilliams

Javascript: ¿Puedo crear dinámicamente un objeto CSSStyleSheet e insertarlo?

Respuesta

Cuestiones relacionadas