Подсветка элементов с помощью jQuery

Довольно распространенная задача – подсвечивать элементы формы. Например, при проверке на корректность заполнения очень неплохо подсветить их и перевести фокус на пропущенные элементы.
Чаще всего для подсветки я выделяю border у элементов как правило красным цветом. Для реализации использую jQuery и классы CSS, если ест такая возможность. Потому тут опишу 2 метода.
1й метод. С помощью класса CSS
Для реализации метода создаю класс .red:
1 2 3 |
.red { border: #f00 1px solid; } |
С помощью JavaScript добавляю код для добавления класса к элементу. Для примера буду использовать добавление класса и его удаление при нажатии кнопки с ID 'colorizeBtn':
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function () { var clicked = 0; $('#colorizeBtn').click(function() { if(clicked%2 == 0) { $('input').addClass('red'); } else { $('input').removeClass('red'); } clicked++; }); }); |
2й метод. С помощью добавления стилей CSS
Этот метод рекомендую использовать только тогда, когда нет возможности подключить CSS класс.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(document).ready(function () { var clicked = 0; $('#colorizeBtn').click(function() { if(clicked%2 == 0) { $('input').css( { 'border-color': '#f00', 'border-width' : '1px', 'border-style' : 'solid' }); } else { $('input').css( { 'border-color': '#000', 'border-width' : '1px', 'border-style' : 'solid' }); } clicked++; }); }); |
Очевидный минус этого метода – нельзя вернуться к первоначальному состоянию элемента, можно только добавить стиль, такой же как у первоначального состояния. Но если спустя какое-то время изменить основной CSS файл, то про этот обработчик вы скорей всего не вспомните. Потому этот метод использовать не рекомендую.
Комментариев нет »
No comments yet.
RSS feed for comments on this post. TrackBack URL
Leave a comment
Популярное за месяц
- Excel. Как сделать выбор значения ячейки из списка
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Как под рисунком сделать надпись в Word
- Изменить формат ссылок R1C1 в Excel
- Настроить автоматическую сортировку писем по папкам в Outlook
- Удалить ненужные профили в Xbox 360
- Как записать диск с MP3 программой Nero Burning Rom
- Условия в PowerShell
- Подключение мыши CBR CM530Bt к компьютеру
Новое на сайте
- Разрезать клип на части в Vegas Pro
- Разрешить воспроизведение видео MP4 на сайте
- Не отправляются сообщения при нажатии Enter в веб-версии WhatsApp в Chrome
- Не запрашивать пароль после отключения экрана в Windows 10
- Программа для склеивания видео MP4Joiner
- Не открывается крышка бензобака в Opel Antara
- Офигенные стекла для Honor 8 Lite на AliExpress
- Запросы для обновления базы данных WordPress при изменении адреса сайта
- Программы для контроля и ограничения использования телефона ребенка
- Запретить запуск приложений Windows
Популярное за 24 часа
- Windows 8.1 – не меняется яркость экрана. Решение проблемы
- Как под рисунком сделать надпись в Word
- Удалить ненужные профили в Xbox 360
- Подключение мыши CBR CM530Bt к компьютеру
- Excel. Как сделать выбор значения ячейки из списка
- Правила оформления текстовых документов по ГОСТ 7.32 - 2001
- Как записать диск с MP3 программой Nero Burning Rom
- Калибровочная карта для Xbox 360
- Исправление ошибки "FATAL ERROR: wglCreateContextAttribsARB failed" при запуске 3D игр на ноутбуке
- Добавить чекбокс (флажок, крыжик) в документе Word