Poner Javascript en CSS

Question

He estado pensando en algo. En mi foro, hay códigos CSS predeterminados que los usuarios pueden elegir. Esto cambia todo, desde el fondo hasta el color del texto. Tengo un código de javascript. ¿Es posible hacer que el javascript sea parte del CSS, de modo que si un determinado código CSS está predeterminado, parte de él es ese javascript?

Answer 1

You can, pero realmente no debería. En su lugar, use archivos de script separados que correspondan a los archivos CSS que usa. Tal vez haga otra pregunta en la que exponga un escenario específico en el que trate de resolver un problema específico, y probablemente podamos decirle la práctica que generalmente se hace para resolverlo.

Answer 2

Hay un trabajo alrededor ...

No poner la escritura en el código CSS puro, sino que tienen una secuencia de comandos para generar CSS Dependiendo de lo lenguaje de programación que está utilizando (por ejemplo, PHP) su enlace al archivo CSS debe parecerse a:

<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" /> 

incluso se puede añadir como params:

<link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" /> 

y en el que styles.php lo que debería parecerse archivo CSS con una pocas excepciones:

body { 
    <?php if ($_GET['type'] == 'main') echo color: BLACK; else color: RED; ?> 
    ......... 
} 

Answer 3

que quería lograr lo mismo (tener variables y algo de lógica de procesamiento en el CSS) que me incitó a desarrollar un par de herramientas independientes (uno angular y uno V-JS):

• CjsSS.js es una herramienta Javascript de Vainilla (por lo que no hay dependencias externas) que admite volver a IE6.

• ngCss es un módulo angular + Filtro + Factory (aka: plug-in) que soporta 1.2+ angular (para volver a IE8)

Ambos conjuntos de herramientas le permiten hacer esto de una ESTILO etiqueta o dentro de un archivo * .css externo:

/* 
<script src='external_logic.js'></script> 
<script> 
    var mainColor = "#cccccc"; 
</script>*/ 

BODY { 
    color: /*{{mainColor}}*/; 
} 

Y esto en sus páginas en style atributos:

<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div> 

(o para ngCss)

<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div> 

NOTA: En ngCss, también se puede hacer $scope.mainColor en lugar de var mainColor

Por defecto, el código JavaScript se ejecuta en un IFRAME de espacio aislado, pero en realidad no es diferente de cómo el navegador procesa tus archivos * .js. Solo asegúrese de crear su propio CSS y alojarlo en su propio servidor, entonces XSS no es un problema. Pero la caja de arena proporciona mucha más seguridad y tranquilidad.

CjsSS.js y ngCss caen en algún lugar en medio de las otras herramientas de torno para llevar a cabo tareas similares:

• LESS, y SASSStylus son todos Preprocesadores solamente y requieren que usted pueda aprender un nuevo idioma y mangle tu CSS. Básicamente, extendieron CSS con nuevas funciones de idioma. Todos están limitados a los complementos desarrollados para cada plataforma, mientras que CjsSS.js y ngCss le permiten incluir cualquier biblioteca de Javascript a través del <script src='blah.js'></script>.

• AbsurdJS vieron los mismos problemas con los preprocesadores y fueron en la dirección opuesta; en lugar de extender CSS, AbsurdJS creó una biblioteca Javascript para generar CSS sin tocar CSS directamente.

CjsSS.js y ngCss tomaron el término medio; ya sabes CSS, ya sabes Javascript, así que déjalos trabajar juntos de una manera simple e intuitiva. CjsSS.js se puede ejecutar en el lado del servidor (a través de Node.js) para preprocesar el CSS o ambos se pueden ejecutar en el lado del cliente. También puede ejecutarlo de forma híbrida, donde la mayoría de las variables se preprocesan y las demás se realizan en el lado del cliente.