Agregue css dinámicamente a la página a través de javascript

Question

Estoy creando un widget que se agregará a sitios web externos y he creado una página que genera css para que lo estilo (color de texto, color de fondo, tamaño de fuente, etc.) . Termino con un área de texto llena de CSS para copiar/pegar en su sitio web.

¿Hay alguna manera de agregar este css a la página actual para tener una vista previa en vivo?

Answer 1

¿Se puede agregar una etiqueta style al DOM, con los contenidos del área de texto en ella? Es posible que desee darle una identificación para que pueda cambiarla más tarde.

Answer 2

Te recomiendo que comiences a usar un marco decente para tu desarrollo web/JavaScript, personalmente iría con jQuery.

http://api.jquery.com/css/ 

Aquí hay algunos fragmentos de código que muestran cómo establecer rápidamente las propiedades de CSS para los elementos.

Answer 3

He tradicionalmente anexado un bloque <style> al hacer elementos.

var style_rules = []; 

style_rules.push("#" + myElemId + " { /* Rules */ } "); 
/* ... */ 

var style = '<style type="text/css">' + style_rules.join("\n") + "</style>"; 
$("head").append(style); 

Una cosa importante a tener en cuenta es que debido a que usted no sabe lo que cualquiera de los estilos existentes, o qué id 's puedan entrar en conflicto en la página, que es muy útil para mantener un registro de sus identificadores dentro de su Aplicación de JavaScript, y luego usarlos para completar el bloque <style> inyectado. También tienden a correr mis nombres a través de una función de prefijo para asegurarse de que los nombres genéricos de wrapper y unit no entren en conflicto (que se convierten en algo así como myunique_wrapper y myunique_unit.

la incorporación de un reinicio básica CSS como #myWrapper {margin: 0; padding: 0} puede ser una plataforma de partida decente para construir sus propios estilos personalizados

Dirigiendo su caso único, una vista previa en vivo por así decirlo, designaría un div con elementos estándar. Luego, cuando hagan clic en "actualizar", lea las reglas y añádalos a la cabeza. Si desea negar los efectos residuales de las reglas anteriores, puede eliminar el último elemento <style> o mejor aún dar su <style> element an id. No estoy seguro de si ese tipo de selección funcionaría, pero debería.

Answer 4

si desea añadir texto css

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = 'content'; 
document.getElementsByTagName('head')[0].appendChild(style); 

si desea añadir el archivo css

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('type', 'text/css'); 
link.setAttribute('href', 'css/my.css'); 
document.getElementsByTagName('head')[0].appendChild(link); 

Answer 5

var element = document.createElement('style'); 
element.setAttribute('type', 'text/css'); 

if ('textContent' in element) { 
    element.textContent = css; 
} else { 
    element.styleSheet.cssText = css; 
} 

document.getElementsByTagName('head')[0].appendChild(element);