javascript - example - mark js

Usar Javascript en CSS

Question

¿Es posible usar Javascript dentro de CSS?

Si es así, ¿puedes dar un ejemplo simple?

Answer 1

Creo que lo que puede estar pensando son expressions o "propiedades dinámicas" , que solo son compatibles con IE y le permiten establecer una propiedad para el resultado de una expresión de JavaScript. Ejemplo:

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Este código hace que IE emule la propiedad de max-width que no admite.

Sin embargo, todo lo que se considera evitar el uso de estos . Son algo malo, malo.

Answer 2

Esta resulta ser una pregunta muy interesante. Con más de cien propiedades configuradas, podría pensar que podría escribir .clickable {onclick: "alert (''hi!'');" ; } en tu CSS, y funcionaría. Es intuitivo, tiene mucho sentido. Esto sería increíblemente útil en el parche de monos UI masivas generadas dinámicamente.

El problema:
La policía de CSS, en su sabiduría infinita, ha dibujado un muro chino entre la presentación y el comportamiento . Cualquier HTML debidamente etiquetado, lo que sea intencionalmente no compatible con CSS. ( Tabla de propiedades completas )

La mejor forma de evitar esto es usar jQuery, que configura un motor interpretado en segundo plano para ejecutar de todos modos lo que intentaba hacer con CSS. Ver esta página: Agregar Javascript Onclick al archivo .css .

Buena suerte.

Answer 3

IE admite expresiones CSS:

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

pero no son estándar y no son portátiles en todos los navegadores. Evítalos si es posible. Están en desuso desde IE8 .

Answer 4

Me encontré con un problema similar y he desarrollado dos herramientas independientes para lograr esto:

• CjsSS.js es una herramienta Javascript de Vainilla (por lo que no hay dependencias externas) que sea compatible con IE6.

• ngCss es un Módulo Angular + Filtro + Fábrica (también conocido como: complemento) que admite Angular 1.2+ (así que vuelve a IE8)

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

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

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

Y esto en sus atributos de style en la página:

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

o

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

NOTA: En ngCss, también podría hacer $scope.mainColor en lugar de var mainColor

Por defecto, el Javascript se ejecuta en un IFRAME de espacio aislado, pero como usted crea su propio CSS y lo aloja en su propio servidor (al igual que sus archivos * .js), entonces XSS no es un problema. Pero la caja de arena proporciona mucha más seguridad y tranquilidad.

CjsSS.js y ngCss se encuentran en algún lugar entre las otras herramientas para realizar tareas similares:

• LESS , SASS y Stylus son todos preprocesadores solamente y requieren que aprendas un nuevo idioma y destruyas 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 te permiten incluir cualquier biblioteca de Javascript a través de <script src=''blah.js''></script> directamente en tu CSS.

• AbsurdJS vio los mismos problemas y AbsurdJS la dirección exactamente opuesta a la de los preprocesadores anteriores; en lugar de extender CSS, AbsurdJS creó una biblioteca Javascript para generar CSS.

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.

Answer 5

No en el sentido convencional de la frase "dentro de CSS".

Answer 6

Para facilitar la solución de su problema dada la información que ha proporcionado, supongo que está buscando CSS dinámico. Si este es el caso, puede usar un lenguaje de scripting del lado del servidor para hacerlo. Por ejemplo (y me encanta hacer cosas como esta):

styles.css.php:

body
 {
margin: 0px;
font-family: Verdana;
background-color: #cccccc;
background-image: url(''<?php
echo ''images/flag_bg/'' . $user_country . ''.png'';
?>'');
 }

Esto establecería la imagen de fondo a lo que estaba almacenado en la variable $ user_country . Este es solo un ejemplo de CSS dinámico; hay posibilidades prácticamente ilimitadas cuando se combina CSS y el código del lado del servidor. Otro caso sería hacer algo como permitir que el usuario cree un tema personalizado, almacenarlo en una base de datos y luego usar PHP para establecer varias propiedades, como las siguientes:

user_theme.css.php:

body
 {
background-color: <?php echo $user_theme[''BG_COLOR'']; ?>;
color: <?php echo $user_theme[''COLOR'']; ?>;
font-family: <?php echo $user_theme[''FONT'']; ?>;
 }

#panel
 {
font-size: <?php echo $user_theme[''FONT_SIZE'']; ?>;
background-image: <?php echo $user_theme[''PANEL_BG'']; ?>;
 }

Una vez más, sin embargo, este es simplemente un ejemplo fuera de la cabeza; Aprovechar el poder de CSS dinámico a través de scripts de servidor puede conducir a cosas bastante increíbles.

Answer 7

Para una solución más actual, usando Vue.

    var vue = new Vue({
      el : "#app",
      data: {
      styleObject: {
        color: ''red'',
        fontSize: ''20px''
      },
      activeColor: ''blue'',
      activeColor2: ''green'',
      fontSize: ''30px''
      },
      methods : {
        color: function (color) {
          this.activeColor2 = color;
        }
      },
      mounted: function () {
        if(1 > 0) {
          this.color(''gray'');
        }
      }      
    })

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <ul id="app" :style="styleObject">
      <li>test</li>
      <li :style="{color: activeColor2, fontSize: fontSize}">test</li>
      <li>test</li>
      <li>test</li>
      <li :style="{color: activeColor, fontSize: fontSize}">test</li>
      <li>test</li>
      <li>test</li>
    </ul>

Answer 8

IE y Firefox ambos contienen formas de ejecutar JavaScript desde CSS. Como menciona Paolo, una forma en IE es la técnica de expression , pero también está el comportamiento más oscuro de HTC , en el que un XML separado que contiene su script se carga a través de CSS. Existe una técnica similar para Firefox, utilizando XBL . Estas técnicas no ejecutan JavaScript desde CSS directamente , pero el efecto es el mismo.

HTC con IE

Use una regla CSS como tal:

body {
  behavior:url(script.htc);
}

y dentro de ese archivo script.htc tiene algo como:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

El archivo HTC ejecuta la función main() en el evento ondocumentready (en referencia a la preparación del documento HTC).

XBL con Firefox

Firefox admite un hack de ejecución de script XML similar, usando XBL.

Use una regla CSS como tal:

body {
  -moz-binding: url(script.xml#mycode);
}

y dentro de tu script.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

Se ejecutará todo el código dentro de la etiqueta del constructor (una buena idea para ajustar el código en una sección CDATA).

En ambas técnicas, el código no se ejecuta a menos que el selector CSS coincida con un elemento dentro del documento . Al usar algo como body , se ejecutará inmediatamente en la carga de la página.