Изменение CSS style через JS

204

15 ноября 2021, 03:30

Хочу по нажатию на стрелки изменять размер картинки на определённое число px. Но вместо этого срабатывает лишь раз и больше не меняется. Отчего так? и как правильно наладить. Чувствую что легко и логика понятна. Но вот с реализацией малость трудновато. Пока только учусь. Спасибо.

JS:

let inp = document.querySelector(".i-10");
let img = document.querySelector("img");
inp.onkeydown = function (e) {
    console.log(e);
    if (e.code == "ArrowUp") {
        img.style.height += "50px";
    }
}

HTML:

<input type="text" class="i-10">
    <img src="https://telegram.org.ru/uploads/posts/2018-05/1526473044_9.png" alt="">

    <script src="script.js"></script>

CSS:

img {
    width: 150px;
    height: 150px;
}

Answer 1

В условие добавьте код для определения текущего состояния(для IE свое):

let height =  parseInt(window.getComputedStyle(img, null).height)

И как уже указали выше, задаем строчное значение:

img.style.height = `${height + 50}px`;

Так будет выглядеть весь код:

let inp = document.querySelector(".i-10");
let img = document.querySelector("img");
    inp.onkeydown = function (e) {
        console.log(e);
        if (e.code == "ArrowUp") {
            const height =  parseInt(window.getComputedStyle(img).height)
            img.style.height = `${height + 50}px`;
        }
    }

Подробнее: https://learn.javascript.ru/styles-and-classes

Можно немного упростить, если пока не удобна интерполяция:

let height =  parseInt(window.getComputedStyle(img).height)    
height += 50
img.style.height = height + 'px'

Answer 2

let inp = document.querySelector(".i-10"); 
let img = document.querySelector("img"); 
let i = 1; 
inp.addEventListener('keydown', (e)=>{ 
  if( e.code == 'ArrowUp' ){ 
      let d = 50 * i; 
     img.style.height = d + 'px'; 
  } 
 i++ 
})

img { 
      width: 150px; 
      height: 150px; 
  }

<input type="text" class="i-10"> 
    <img src="https://telegram.org.ru/uploads/posts/2018-05/1526473044_9.png" alt="">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проверка состояния бота discord

Хочу сделать бота который будет отслеживать состояние других ботовКак можно сделать проверку состояния другого бота или пользователя (Онлайн...

158

javascript

фильтрация массива другим массивом

Есть два массиваВ одном массиве содержатся выбранные пользователем теги (жанры кино), а во втором массиве находятся сами фильмы

266

javascript

Как присвоить переменной js цену товара

На странице выведено несколько товаров в каталоге (Woocommerce), мне нужно на этой же странице вывести по клику на "Добавить в корзину" цену именно...

279

javascript

Реализация кнопки "показать еще"

Проблема в том, что в мой addEventListener попадают немного не те данные, и я не могу понять в чем дело, хоть и объявил функцию общуюПросто кода слишком...