Estoy tratando de crear un visor de imágenes en javascript. Entonces, existe esta función en la que disminuyo el tamaño de la imagen cuando se presiona el botón '-' o se desplaza la rueda del mouse hacia abajo. Pero después de que la altura de la imagen desciende por debajo de 10 px, ya no puedo volver a agrandarla. Entonces, para abordar ese problema, pensé en poner una declaración if donde verificará la altura de la imagen y no disminuirá el tamaño si no está por encima de 10px. Pero, eso si la declaración no está funcionando. Y no puedo entender por qué.
A continuación se muestra una parte de mi código. Traté de poner un console.log() para verificar si va a la declaración if o no. Pero, no va.
function decrease_image(){ var img = new Image(); img = image_viewer_pics[current_viewer_image]; if (img.style.height < "100%"){ img.style.margin = "auto 0px"; } if (img.style.height > "10px"){ img.height = img.height / 1.1; console.log("greater than 10px"); } }Aquí hay una función para ilustrar los comentarios: debe normalizar las variables antes de comparar. Compara cadenas con cadenas y números con números.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
function decrease_image(){ let img = image_viewer_pics[current_viewer_image]; //= new Image(); let is_perc = img.style.height.includes("%"); let height_n = +img.style.height.replace(/[^0-9.]/g, '') // this removes any non-number (except .) - the + sign in front turns it into type Number if (is_perc && height_n < 100){ img.style.margin = "auto 0px"; } else if (!is_perc && height_n > 10){ img.height = (height_n / 1.1) + "px"; console.log("greater than 10px"); } }