jQuery добавляем свойства CSS

На нескольких примерах рассмотрим добавление свойств CSS на страницу сайта с помощью jQuery. Разбираем плюсы и минусы двух основных способов изменения стилей на странице.

Для изменения параметров содержимого страницы, с помощью библиотеки jQuery для JavaScript, можно воспользоваться двумя способами:

1. Изменение отдельных свойств

Изменим элементы со свойствами class-one и .class-two при наведении на элемент с классом .ploshadka-net.

Изменение классов

Этот способ предпочтительнее и удобнее, если требуется изменить много различных свойств с помощью jQuery. Если все эти свойства прописать в самом js файле, то можно серьёзно усложнить читаемость и понимание всего кода. Лучше прописать все стили в CSS файле, а с помощью jQuery менять их.

При возникновении события поменяем стиль .class-one на стили .class-one .class-two:

Если внимательно посмотреть на код выше, можно задаться вопросом, зачем мы удаляем класс class-one и его же затем возвращаем вместе с другим.

Так нужно, потому что в этом коде было решено .class-one использовать как «ярлык», чтобы в дальнейшем можно было обрабатывать этот элемент не вспоминая какой у него новый класс.

Таким образом мы очищаем его от всех классов, в том числе добавочных, а затем возвращаем первоначальный класс (который используем как «ярлык»). И добавляем новый класс, которым меняем свойства элемента.

Теперь, если нам нужно будет снова изменить этот элемент или привести его в первоначальное состояние, нам не придется прописывать ничего лишнего:

Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "jQuery добавляем свойства CSS".

Ваш e-mail не будет опубликован. Обязательные поля помечены *