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.