Уменьшение картинки

Question

помогите решить проблему. Есть код по увеличению(при нажатии) картинки и уменьшение(при уходе с нее). При увеличении все работает корректно, а при уменьшении ничего не работает.

function increase(event){
    event.currentTarget.style.width = event.currentTarget.style.width + '300px';
}

function decrease(event){
    event.currentTarget.style.width = event.currentTarget.style.width - '300px';
}

.stylediv{
  background-color: red;
  width: 100px;
  height: 100px;
}

<div onmouseout='decrease(event)' onclick='increase(event)'  class="stylediv" > Контент </div>

Answer 1

Когда что-то не получается в JS, то ваш первый друг - команда console.log. Добавив её в функции мы увидим, что event.currentTarget.style.width это строка, причём пустая в первый раз. Соответственно + у нас срабатывает, а - уже нет.

Решение 1. Просто вводить нужный размер фиксировано.

function increase(event){
    console.log(event.currentTarget.style.width);
    event.currentTarget.style.width = '400px';
}

function decrease(event){
    console.log(event.currentTarget.style.width);
    event.currentTarget.style.width = '100px';
}

.stylediv{
  background-color: red;
  width: 100px;
  height: 100px;
}

<div onmouseout='decrease(event)' onclick='increase(event)'  class="stylediv" > Контент </div>

Решение 2. Воспользоваться css переменной и менять её.

const r = document.querySelector(':root');

function increase(event){
    r.style.setProperty('--add-size', '300px');
}

function decrease(event){
    r.style.setProperty('--add-size', '0px');
}

:root {
  --size: 100px;
  --add-size: 0px;
}
.stylediv{
  background-color: red;
  width: calc(var(--size) + var(--add-size));
  height: 100px;
  transition: width .25s linear;
}

<div onmouseout='decrease(event)' onclick='increase(event)'  class="stylediv" > Контент </div>

Answer 2

Вы пытаетесь присвоить к width + '300px' (строка). Когда к пустой строке присваиваются строка '300px', вы получаете именно этот результат.

Дальше вы пытаетесь отнять > width - '300px. Вот только ваш width уже строка - '300px' Пример.

Обратите внимания - style.width изначально пустая строка, при этом в css вы явно указали это свойство в размере 100px

БЛОГ НА HUSL

Уменьшение картинки

Ответы (2 шт):