1

tengo un problema que me trae de cabeza. Tengo en el html unos inputs para seleccionar el filtro css que quiero aplicar y el porcentaje. Recojo todos los datos en variables, pero no se cómo modificar el estilo. Normalmente con ().css(propiedad,valor) se podría modificar, pero el filtro sería (filter: propiedad(valor%) :(

En el html tendría:

<input type="number" min="0" max="100" id="porcentajeEfecto" >% 
<input type="button" value="Aplica Efecto" id="btnAplicaEfecto">
<img id="fotoCoche1" class="fotoColage" src="./IMG/01.jpg" alt="Imagen coche 1">

En el css:

.fotoColage{
    border: 2px solid black;
    filter: grayscale(0%);
    filter: sepia(0%);
    filter: invert(0%);
} 

Lo normal en JQery sería:

$('.fotoColage').css('border-radius', '8px')

Con esto puedo modificar el border_radius, pero no se hacerlo con el filter: grayscale(porcentajeEfecto %)

Muchas gracias de antemano.

1 respuesta 1

1

Como mismo sugieres, usa .css("filter", "sepia(32%)"), solo que para insertar los valores de manera dinámica, usa las plantillas literales de javascript. Te adjunto un ejemplo:

$( "#btnAplicaEfecto" ).click(function() {
   var porcentaje = $("#porcentaje").val()
   $("#foto")
     .css("filter", `grayscale(${porcentaje}%) sepia(${porcentaje}%) invert(${porcentaje}%)`)     
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="0" max="100" id="porcentaje" >
<input type="button" value="Aplica Efecto" id="btnAplicaEfecto">
<br>
<img id="foto" class="fotoColage" src="https://picsum.photos/seed/picsum/200" alt="Imagen">

1
  • 1
    Mil gracias!!!!! He dejado el código así, ya que el tipo de efecto también lo había recogido en una variable: ''''' $('.fotoColageRojo').css('filter',${efecto}(${porcentaje})) '''''
    – GADI CANTO
    el 8 may. 2022 a las 8:28

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.