swipeshot
@swipeshot
Учусь на ошибках.

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

Представим, есть div с классом example. Вот css к нему:
.example{
width: 100%;
height: 4px;
}


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

Надо, чтобы если в поле ввода было число 7, к примеру, то height у .example был 7.
Как такое реализовать?
Можно ли пример или сразу готовый код?
  • Вопрос задан
  • 2291 просмотр
Решения вопроса 1
BBoyJuss
@BBoyJuss
WordPress, интерфейсы и все вытекающие
// 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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@IceJOKER
Web/Android developer
Сам класс .exmplae{} поменять нельзя(если ошибаюсь исправьте), но можно изменить height у элемента.
слушаем ввод в поле, считываем данные из поля, и устанавливаем это значение как height у элемента.
Как все это сделать можно прочесть в интернете, ищите по-отдельности
Ответ написан
Комментировать
На событие change (или keypress, по вкусу) поля навешиваешь обработчик, который и будет менять нужное значение нужного параметра нужного элемента.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы