Взаимодействие поля ввода с css?

Question

[Ilya Korablev]

Представим, есть div с классом example. Вот css к нему:

.example{
width: 100%;
height: 4px;
}

Есть еще вот такое поле:
<input type="number" value="1" min="1" max="50"/>

Надо, чтобы если в поле ввода было число 7, к примеру, то height у .example был 7.
Как такое реализовать?
Можно ли пример или сразу готовый код?

Answer 1

[Юнус Газиев]

// jquery код
$(document).ready(function() {
    
    var example = $('.example'),
        exampleHeight = $('.example-height');

    exampleHeight.on('keyup change', function() {
        example.css({
            height: exampleHeight.val()
        });
    });
    
});

демка на JSFiddle
почитать jQuery для начинающих, jQuery Get Started

Answer 2

[IceJOKER]

Сам класс .exmplae{} поменять нельзя(если ошибаюсь исправьте), но можно изменить height у элемента.
слушаем ввод в поле, считываем данные из поля, и устанавливаем это значение как height у элемента.
Как все это сделать можно прочесть в интернете, ищите по-отдельности

Answer 3

[Леонид Сысолетин]

На событие change (или keypress, по вкусу) поля навешиваешь обработчик, который и будет менять нужное значение нужного параметра нужного элемента.