4

Quiero capturar el valor de src y pasarlo a una variable CSS, que está en el style inline del padre contenedor llamada --img-url.

La idea que tengo que en el html, tengo esto:

<figure class="img-container" style="--img-url: ;">
 <img class="imagen" src="imagen.jpg"/>
</figure>

En el CSS:

.img-container .imagen{ display: none; }
.img-container { background-image: var(--img-url); }

Y en jQuery:

$(document).ready(function(){

  var asignarCssvar = function(selector, variable, valor) {
    $(selector).css(variable,valor);
  }

  var capturaAtributo = function(selector, atributo) {
    var valorAtributo = $(selector).attr(atributo);   

    var urlBkg = "url('"+valorAtributo+"')";

    asignarCssvar(".img-container","--img-url",urlBkg);
  }

  capturaAtributo(".img-container .imagen", "src");

});

Ejemplo funcional:

$(document).ready(function(){
  
  var asignarCssvar = function(selector, variable, valor) {
    $(selector).css(variable,valor);
  }
  
  var capturaAtributo = function(selector, atributo) {
    var valorAtributo = $(selector).attr(atributo);   
    
    var urlBkg = "url('"+valorAtributo+"')";
    
    asignarCssvar(".img-container","--img-url",urlBkg);
  }

  capturaAtributo(".img-container .imagen", "src");
  
});
.img-container {
  background-image: var(--img-url);
  background-size: cover;
  background-position: center;
  background-color: #dddfff;
  padding: 1em;
  width: 100px;
  height: 100px;
}
.img-container .imagen {
  width: 100%;
  height: auto;
  transform: translateX(200%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<figure class="img-container" style="--img-url: ;">
 <img class="imagen" src="https://picsum.photos/900/300"/>
</figure>

Pero como ven, tengo 2 problemas:

  1. Algo estoy haciendo mal, que no funciona o no se puede hacer así
  2. ¿Cómo tomo el valor de la variable declarada en el style sin tener que escribirla manualmente y nuevamente en el jquery?
  3. Opcionalmente me gustaría saber ¿como lo harían, pero vanillaJW?.

Actualización

Creo que muchos no conocen sobre las variables, que oficialmente se les conoce como las Custom Properties de css: Usando Variables CSS | Documentación MDN y sí se que aún no están del todo implementadas, aunque tienen buen soporte según caniuse por eso mencione que estoy haciendo experimentos :)

He podido usar el mismo código en codepen y funciona, por que será? Link para ver demo en Codepen


Actualización 2

Sí, al parecer si funciona, solo que con la última versión de jQuery 3.2.1 y no hay respuesta oficial de por qué. Gracias @AlvaroMontoro por responder. Ya actualice mi código y funciona como magia!

Sobre si se puede hacer sin JavaScript (sólo con los estilos CSS)

En cuanto a que si quería hacerlo solo via CSS, no era mi intención en la pregunta, pero qué bien que por accidente también me dieron razón del porqué no se podría. Sin embargo, porque la terquedad es necia, quizá esta respuesta quede en "posible" en un futuro, ya que me acordé de este articulo que en su día leí pero no entendí hasta que ahora: Articulo en este super blog de css que vamos a tener unas "funciones css" o parecidas, o que ya tenemos una como calc() bien soportada y que en un futuro attr() y toggle quizás.

4
  • Hay diferencia entre src y style, creo que la pregunta no esta bien formulada Commented el 15 ene. 2018 a las 23:20
  • Si quieres obtener cualquier dato del CSS del elemento con jQuery, existe la funcion .css docs Commented el 15 ene. 2018 a las 23:29
  • Gracias @MikeVelazco pero conozco la diferencia entre los dos atributos, si me lees bien el post, te darás cuenta que lo que pregunto es algo distinto. Commented el 16 ene. 2018 a las 0:05
  • 2
    No te está funcionando aquí por la versión de jQuery que estás usando. Aquí tienes la 2.1.1 y en Codepen tienes la 3.2.1. Cambiando la de aquí a la 3.2.1 funciona el ejemplo. Parece que hacen cosas diferentes en .css(), aunque no he encontrado el motivo en la documentación de jQuery.
    – Alvaro Montoro
    Commented el 16 ene. 2018 a las 4:50

2 respuestas 2

3

Como ponía en los comentarios: No funciona aquí pero sí en Codepen por la versión de jQuery que estás usando. No he podido encontrar el motivo específico de por qué es así, pero si en lugar de usar la 2.x usas la 3.x parece que el problema se resuelve sin más cambios de código:

$(document).ready(function(){
  
  var asignarCssvar = function(selector, variable, valor) {
    $(selector).css(variable,valor);
  }
  
  var capturaAtributo = function(selector, atributo) {
    var valorAtributo = $(selector).attr(atributo);   
    
    var urlBkg = "url('"+valorAtributo+"')";
    
    asignarCssvar(".img-container","--img-url",urlBkg);
  }

  capturaAtributo(".img-container .imagen", "src");
  
});
.img-container {
  background-image: var(--img-url);
  background-size: cover;
  background-color: #dddfff;
  padding: 1em;
  width: 100px;
  height: 100px;
}
.img-container .imagen {
  transform: translateX(100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<figure class="img-container" style="--img-url: ;">
 <img class="imagen" src="http://lorempixel.com/200/200/sports/1"/>
</figure>


Otra parte del problema: ¿Cómo podría hacerse sólo con JS puro sin jQuery? Aquí voy a dejar dos maneras diferentes de hacerlo (realmente podrías hacerlo en jQuery ocupando bastante menos). Están comentadas, pero dime si no se entiende algo:

// OPCIÓN 1: añadir variable directamente al estilo del elemento
document.querySelector(".img-container").style.cssText = "--img-url: url(" + document.querySelector(".img-container .imagen").src + ")";

/*
// OPCIÓN 2: crear una etiqueta de estilos y añadir la variable ahí

// crear etiqueta style
misEstilos = document.createElement("style");
// añadirla a la cabecera
document.head.appendChild(misEstilos);
// insertar regla con variable
misEstilos.sheet.insertRule(":root { --img-url: url(" + document.querySelector(".img-container .imagen").src + ");}");

*/
.img-container {
  background-image: var(--img-url);
  background-size: cover;
  background-color: #dddfff;
  padding: 1em;
  width: 100px;
  height: 100px;
}
.img-container .imagen {
  transform: translateX(100%);
}
<figure class="img-container">
  <img class="imagen" src="http://lorempixel.com/200/200/sports/1"/>
</figure>


Sobre si se puede hacer sin JavaScript (sólo con los estilos CSS), me parece que la respuesta es: No, no se puede. Al menos no de momento, por dos motivos:

  1. El src es un atributo HTML de la etiqueta y no una propiedad CSS. Quizás podrías cambiar el HTML para añadir un data-atributo con el valor del src y leerlo desde CSS usando attr()... pero aún así, tendrías otro problema:
  2. Estarías intentando cambiar los estilos del ancestro, y de momento no hay selector de ancestro. O mejor dicho: Sí existe uno (!), como parte de los selectores de nivel 4, pero no lo soporta casi ningún navegador.
3
  • 1
    Yo creia conocer sobre CSS, pero ni idea sobre el nuevo selector de ancestro, muchas, muchisisimas gracias por este posible y brillante futuro css que me has dado a conocer. Y gracias por tu respuesta/comentario/tiempo, me has despejado la duda de una manera ejemplar, aunque aún no sepamos del como funciona con la nueva vr de Jquery jejeje Tu respuesta, me ha dado luz. Saludos! Commented el 16 ene. 2018 a las 15:15
  • @EdgarGutiérrez la pena es que ese selector no funciona en ningún navegador actual, por lo que no sirve de mucho. Y aunque funcionara, no tengo claro que se pudiera usar una variable del descendiente en las reglas del ancestro.
    – Alvaro Montoro
    Commented el 16 ene. 2018 a las 15:59
  • @EdgarGutiérrez mirando más sobre el tema. El selector ! se quitó del borrador de selectores y en su lugar se añadió el :has(). Así que creo que no habría una manera CSS pura de hacerlo.
    – Alvaro Montoro
    Commented el 16 ene. 2018 a las 17:59
-1

He suprimido el background-image con la variable porque no es correcto y no lo necesita. He cambiado el style que tenía la etiqueta figure y he corregido tu código.

Entiendo que esto es lo que necesitas?

        $(document).ready(function () {
        // Añade la ruta de la imagen
        var asignarCssvar = function (selector, valor) {
            $(selector).css({ 'background-image': 'url(' + valor + ')' });
        }

        //captura la ruta de la imagen
        var capturaAtributo = function (selector, atributo) {
            var valorAtributo = $(selector).attr(atributo);
            asignarCssvar(".img-container", valorAtributo);
        }

        capturaAtributo(".img-container .imagen", "src");
    });
.img-container {
        background-size: cover;
        background-color: #dddfff;
        padding: 1em;
        width: 100px;
        height: 100px;
    }

        .img-container .imagen {
            transform: translateX(100%);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <figure class="img-container">
    <img class="imagen" src="http://lorempixel.com/200/200/sports/1" />
</figure>

Edito:

Este sería un ejemplo de uso con variables en el CSS.

:root {
        --imagen-1: url(http://lorempixel.com/200/200/sports/1);
    }
    
    .img-container {
        background-image: var(--imagen-1);
        background-size: cover;
        background-color: #dddfff;
        padding: 1em;
        width: 100px;
        height: 100px;
    }

    .img-container .imagen {
        transform: translateX(100%);
        content: var(--imagen-1);
    }
    <figure class="img-container">
    <img class="imagen"/>
</figure>

3
  • Gracias por tu respuesta. Claro ese es el metodo tradicional, creo que no me he explicado bien, lo que quiero es combinar ese metodo con el uso de variables css: developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables. Commented el 16 ene. 2018 a las 0:05
  • Estríctamente por CSS me temo que no se puede, la ruta está en el DOM como un atrubuto del HTML siendo necesaria que fuera una propiedad CSS.
    – Qadesh
    Commented el 16 ene. 2018 a las 6:23
  • Gracias por responder, pero ya he podido hacerlo vía js, aunque tienes razón no se podría ahora mismo hacerlo unicamente por css, aunque ya me lo temía. Éxitos! Commented el 16 ene. 2018 a las 14:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.