На нескольких примерах рассмотрим добавление свойств CSS на страницу сайта с помощью jQuery. Разбираем плюсы и минусы двух основных способов изменения стилей на странице.
Для изменения параметров содержимого страницы, с помощью библиотеки jQuery для JavaScript, можно воспользоваться двумя способами:
1. Изменение отдельных свойств
Изменим элементы со свойствами class-one и .class-two при наведении на элемент с классом .ploshadka-net.
$('.class-one, .class-two').css('width', '30%');
$('.class-one, .class-two').css('height', '240px');
});
Изменение классов
Этот способ предпочтительнее и удобнее, если требуется изменить много различных свойств с помощью jQuery. Если все эти свойства прописать в самом js файле, то можно серьёзно усложнить читаемость и понимание всего кода. Лучше прописать все стили в CSS файле, а с помощью jQuery менять их.
При возникновении события поменяем стиль .class-one на стили .class-one .class-two:
$('.class-one').removeClass().addClass('class-one class-two');
});
Если внимательно посмотреть на код выше, можно задаться вопросом, зачем мы удаляем класс class-one и его же затем возвращаем вместе с другим.
Так нужно, потому что в этом коде было решено .class-one использовать как «ярлык», чтобы в дальнейшем можно было обрабатывать этот элемент не вспоминая какой у него новый класс.
Таким образом мы очищаем его от всех классов, в том числе добавочных, а затем возвращаем первоначальный класс (который используем как «ярлык»). И добавляем новый класс, которым меняем свойства элемента.
Теперь, если нам нужно будет снова изменить этот элемент или привести его в первоначальное состояние, нам не придется прописывать ничего лишнего:
