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:
- Algo estoy haciendo mal, que no funciona o no se puede hacer así
- ¿Cómo tomo el valor de la variable declarada en el style sin tener que escribirla manualmente y nuevamente en el jquery?
- 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.
src
ystyle
, creo que la pregunta no esta bien formulada.css
docs.css()
, aunque no he encontrado el motivo en la documentación de jQuery.