Руководство по стилизации DOM в JavaScript
Вы можете динамически изменять визуальное представление элементов HTML с помощью JavaScript. Вы можете установить практически любые стили для элементов, например font , color , margin , border , background , text-align , width и height , position и т. д.
В этом разделе мы обсудим различные методы установки стилей в JavaScript.
Установка встроенных стилей для элементов
Встроенные стили применяются непосредственно к определенному элементу HTML с помощью атрибута style . В JavaScript свойство style используется для получения или установки встроенных стилей для элемента.
В следующем примере будут установлены свойства цвета и шрифта для элемента с id=»intro» .
Соглашения об именах CSS-свойств в JavaScript
Многие CSS-свойства, такие как font-size , background-image , text-decoration и т. д., содержат дефисы ( — ) в своих именах. Так как в JavaScript дефис является зарезервированным оператором и интерпретируется как знак минус, поэтому невозможно написать выражение, например: elem.style.font-size
Для использования таких свойств, вы должны удалять дефисы и использовать заглавные буквы сразу после каждого дефиса, таким образом CSS-свойство font-size становится свойством DOM fontSize , border-left-style становится borderLeftStyle и так далее.
Получение информации о стилях из элементов
Точно так же вы можете получить стили, примененные к элементам HTML, используя свойство style .
Следующий пример получит информацию о стилях от элемента, имеющего id=»intro» .
Свойство style не всегда полезно, потому что оно возвращает только правила, установленные в атрибуте элемента, а не те, которые получены из других источников, таких как во встроенных таблицах или внешних таблиц стилей.
Чтобы получить значения всех CSS-свойств, которые фактически используются для визуализации элемента, вы можете использовать метод window.getComputedStyle() , как показано в следующем примере:
Значение 700 для CSS-свойства font-weight совпадает с ключевым словом bold . Ключевое слово red является обозначением цвета в формате rgb rgb(255,0,0) .
Добавление CSS-классов в элементы
Вы также можете получить или установить CSS-классы для HTML-элементов, используя свойство className .
Поскольку class является зарезервированным словом в JavaScript, поэтому JavaScript использует свойство className для выбора значения атрибута HTML-класса. В следующем примере показано, как добавить новый класс или заменить все существующие классы для элемента <div> , имеющего id=»info» .
Есть лучший способ работы с CSS-классами. Вы можете использовать свойство classList для легкого получения, установки или удаления CSS-классов из элемента. Это свойство поддерживается во всех основных браузерах, кроме Internet Explorer до версии 10. Вот пример:
alt=»etxt banner 728×90″ /> alt=»etxt banner 120×600″ />
alt=»jivo banner 728×90″ /> alt=»jivo banner 120×600″ />
alt=»skillbox banner 728×90″ /> alt=»skillbox banner 120×600″ />
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 24 декабря, 2019
- 4-5 мин.
- 77
Руководство по сортировке массивов в JavaScript
- 17 декабря, 2019
- 12-17 мин.
- 63
Руководство по массивам в JavaScript
- 15 декабря, 2019
- 2-3 мин.
- 71
Руководство по работе с атрибутами DOM в JavaScript
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.