Вы здесь: Главная » JavaScript » CSS cвойства элемента. Использование в JavaScript

CSS cвойства элемента. Использование в JavaScript

Для манипуляции свойствами элемента в JavaScript есть несколько свойств. К ним относятся:

Познакомимся с ними на примерах.

Свойство style элемента

Самое старое и самое, пожалуй, известное - свойство style. Записывается следующим образом:

Обратите внимание, что свойства, состоящие из 2-х слов и пишущиеся в css-стилях через дефис, в JS записываются слитно, без всяких черточек или нижних подчеркиваний, причем второе слово начинается с заглавной буквы.  Это так называемый "Camel Case", или "горбатый синтаксис", позволяющий визуально отделить друг от друга слова в многосложных конструкциях. Например, css-свойство background-color превратилось в backgroundColor, font-size - в fontSize, а одиночное свойство color так и осталось в виде color. Если бы мы использовали такое свойство, как list-style-type, то должны были бы написать  listStyleType.

Исключением является свойство float:

Дело в том, что слово float является зарезервированным в стандарте языка JavaScript, поэтому его использование в стилевых свойствах невозможно.

В случае использования свойства style мы добавляем inline-форматирование для элемента, к которому обращаемся в JavaScript. Т.е. с точки зрения инспектора свойств те стили, которые были записаны в скрипте будут применены к элементу в виде атрибута style. Это видно из инспектора свойств в браузере.

style_js

Напомню, что такие свойства имеют приоритет перед теми, которые заданы в css-файле. И в этом есть как свои плюсы, так и свои минусы.

Чтобы сбросить поставленный стиль, присваивают в style пустую строку: 

Эту особенность можно использовать, если вам нужно переключаться между какими-то свойствами элемента по событию, например, по клику или по наведению-уведению курсора мыши. В примере ниже при наведении на элемент маркированного списка мы видим изображение слева. При уведении курсора снова отображается маркер, т.е. изображение исчезает.

  • Lorem ipsum dolor sit amet.
  • Et a quos sed ex.
  • Veniam, incidunt repellat ullam minus!
  • Quam non incidunt nemo consectetur.
  • Voluptatibus velit omnis, adipisci. Nobis!

Код примера:

Важно: писать код на javascript, который манипулирует свойствами html-элементов нужно ПОСЛЕ того, как они встретятся на странице, иначе у вас будет ошибка в скрипте, т.к. искомый элемент просто не будет найден. Проще всего располагать теги <script> в самом низу  html-документа перед закрывающимся тегом </body>.

Для того чтобы разобраться с тем, что делает такой метод, как document.querySelector(), стоит прочитать статью Выбор элементов html-страницы с помощью JavaScript.

Свойство style.cssText элемента

Предположим, мы не хотим прописывать в виде нескольких строк целый ряд css-свойств для элемента, тем более, что в итоге они все будут друг за другом перечислены в атрибуте style (см. рисунок выше из Инспектора свойств). Но в свойство style элемента в JavaScript нельзя присвоить строку, состоящую из нескольких свойств. для этого можно использовать свойство style.cssText, которое записывается так:

Это удобней, чем записывать каждое свойство на отдельной строке.
В примере ниже строка css-свойств используется для изменения вида абзаца при клике на нем. Код можно посмотреть во вкладке JS.

See the Pen JS style and className property by Elen (@ambassador) on CodePen.18892

Свойство className

Свойство className предполагает, что вы имеете таблицу стилей, связанную с вашим html-файлом с некоторым количеством классов в ней (стандартная ситуация, не так ли?).  Как правило, класс предполагает наличие не 1-2 стилевых свойств, а 4, 5 и более. В плане применения всех свойств форматирование назначение класса намного удобнее и с точки зрения использования JavaScript, и с точки зрения подключения css.
Назначить класс для элемента можно, используя свойство className (использовать в JS слово class нельзя, т.к. оно является зарезервированным - аналогично float).

Чтобы удалить класс, достаточно в это свойство записать пустую строку.

В примере со списком нужно кликнуть по любому элементу - строке стихотворения - и она окрасится в другой цвет с изменением цвета текста и нижней границей. При повторном клике вид строки вернется к первоначальному.

    И. Демьянов
  • Под самым карнизом,
  • Над самым оконцем
  • Забралось в сосульки
  • Весеннее солнце.
  • Сверкая, бегут по сосулькам слезинки…
  • И тают сосульки – веселые льдинки.

Использованный код:

className

На рисунке видно, что при клике на строке добавляется атрибут class="higtlight", а при повторном клике атрибут class="", т.е. имеет пустое значение, как и прописано в js-коде. Чтобы совсем удалить атрибут class или style, необходимо воспользоваться методом removeAttribute():

Здесь мы удаляем атрибут class, а не className, т.к. это строка, а не название свойства.

    Т. Дмитриев
  • Тюки-тюки, тюки-так –
  • Звон веселый слышен.
  • Звон веселый слышен.
  • Завела под крышей...

В инспекторе свойств видно, что сначала у двух элементов li был добавлен атрибут class="add", а затем у верхнего li он исчез.

removeAttribute
Таким же образом можно удалять атрибут style:

Свойство classList

Свойство classList возвращает список классов элемента. В нем можно использовать 4 метода:

  • add – добавление класса;
  • remove – удаление класса;
  • toggle – переключение класса;
  • contains – проверка наличия класса у элемента.

classList.toggle

Ссылка на описание свойства classList.

Изменение классов методами classList.add() и classList.remove()

Попробуем использовать 3 из 4-х методов свойства classList: contains() для проверки, а назначен ли класс у элемента, add() - для добавления класса, если он не назначен и remove() - для удаления класса при повторном клике.
В примере ниже при клике на любом абзаце добавляется класс "pink". При повторном клике этот класс удаляется.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis vero et vitae accusantium tenetur soluta, possimus ratione molestias expedita neque!

Totam aperiam, expedita eaque. Cum ea consectetur, quas magni fuga animi vero amet repudiandae aperiam ullam, placeat tempore in doloribus!

Incidunt sequi et harum dignissimos quam facere perferendis sunt nesciunt pariatur perspiciatis, magnam natus facilis excepturi, quisquam recusandae doloremque temporibus.

Id ratione quisquam, sed illum debitis consectetur atque enim officiis aut dolorum eaque doloribus distinctio necessitatibus animi praesentium laborum, ad!


Код примера выглядит так:

Переключение классов методом classList.toggle()

Например, нужно сделать простейший переключатель видимых - невидимых элементов с помощью классов. Используем здесь переключатель классов - метод toggle() для того, чтобы добавить к основному классу знак минус с помощью класса "minus" и показать блок абзацев в классе "hide".

See the Pen classList Property by Elen (@ambassador) on CodePen.18892

В примере с абзацами можно было бы сократить код, просто использовав метод classList.toggle():

6 комментариев

  1. Спасибо.
    Очень понятно. Сделал все примеры. Все работает.

  2. Всем привет)
    CSS cвойства элемента style, cssText, className вообще используются сейчас?
    Их же можно задать в css. Зачем это делать в JavaScript?

    • Конечно. так и надо делать.
      Сначала нужно задать свойства в css, а в JS ими можно манипулировать.
      Например, для того чтобы при перемещении пользователя по большой посадочной странице в меню "загорался" соответствующий пункт, необходимо именно с помощью JS или (jQuery) убирать класс у одного элемента и назначать его другому.
      Ни HTML, ни CSS этого пока сделать не могут.

  3. А как насчет изменения тех свойств, которые были заданы в css?

  4. Здравствуйте, мне нужно, чтобы button переключала цвет body background c одного на другой. Не подскажете, что-то никак не получается)))

    • Здравствуйте. Проще всего задать в стилях какой-то класс, который бы назначал цвет фона. Например, .bg {background-color: green}, а затем при клике на кнопке добавлять/удалять этот класс для document.body
      Примерно так:
      button.onclick = function {
      document.body.classList.toggle('bg');
      }

Добавить комментарий для Игорь Отменить ответ

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