div { width: 100px; height: 50px; background-color: blue; } div::after { position: inline-block; content: "Something"; }
<div> </div>
Hola, ¿es posible importar una función JS en CSS?
Digamos que tengo una función JS
funtion mytitle() { return "Something"; }
¿Es posible insertar esta función en el contenido de CSS en lugar de codificarlo como lo hice en el fragmento? me refiero a algo como
div::after { content: mytitle(); }
La respuesta es NO, pero hay una solución para lograr este objetivo. Mediante el uso de atributos para Mostrar ::después del contenido en el elemento.
En el siguiente código HTML , estamos utilizando el atributo de contenido de datos , donde mostramos el valor de retorno del contenido de nuestro método jQuery.
<div data-content=""></div>
En CSS, reemplace el contenido contenido estático content: "Something";
valor a content: attr(data-content);
.
div::after { content: attr(data-content); }
Ahora, simplemente escriba un método jQuery simple para devolver el valor en el atributo data-content
.
function mytitle() { $('div').attr("data-content", "Something change"); } mytitle();
Todos los cambios mencionados anteriormente ya están implementados en el siguiente fragmento de código. Espero que te ayude. Gracias
function mytitle() { $('div').attr("data-content", "Something change"); } mytitle();
div { width: 100px; height: 50px; background-color: blue; } div::after { content: attr(data-content); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-content=""></div>
No, no puedes hacer esto. Debe usar preprocesadores para pasar variables/funciones a los estilos.