Изменение CSS свойств с помощью JavaScript
Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.
Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:
Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):
document.getElementById('elem').style.ЦСгде ЦС — то свойство, к которому нужно обратиться или изменить.
Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background , border , display , font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:
font-sizeЕсли бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:
- Проверить существование переменной font-size .
- Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font .
Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:
-
Если знака минус нет (margin, border, width и прочее) — записывается как есть:
// установить элементу ширину в 30 пикселей document.getElementById('elem').style.width = '30px';// Сделать фон красным document.getElementById('elem').style.backgroundColor = '#FF0000';Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.
Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.
Думаю, нет нужды объяснять, что присвоение неверных значений игронируется?
- Попробуйте управлять этим списком.
- Сделать это совсем просто.
- Можете выбрать свойство color.
- Установите для него значение #0000dd
Выберите CSS-свойство и укажите корректное значение для него:
Поддержка сайта
С удовольствием создаю годный контент. Буду очень признателен, если вы поддержите мои усилия:
Свежим хлебушком типа батон —> 
днём интернета 
шоколадкой для работы мозга 
коробочкой ароматного чая для бодрости продлением домена —> 
продлением хостинга на +1 месяц
.style
Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style .
С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чтобы получить значения инлайновых стилей с помощью свойства style , мы можем записать:
const element = document.getElementById('someElement')const inlineStyles = element.styleconst element = document.getElementById('someElement') const inlineStyles = element.style
В этом случае в значение inline Styles запишется объект CSS Style Declaration , который будет содержать в себе все инлайновые стили элемента element .
Чтобы задать стили для элемента, мы можем использовать несколько способов. Либо через css Text , чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через set Attribute ( ) .) Либо через отдельные свойства в style . [ property Name ] .
Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:
element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;')element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')
Следующая — устанавливает значение определённого свойства, оставляя другие значения стиля нетронутыми:
element.style.color = 'blue'element.style.color = 'blue'
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство style — это механизм для работы со стилями на элементе. С его помощью можно управлять отображением элементов в «рантайме», то есть во время выполнения скрипта.
Этот механизм позволяет «перетирать» стили, описанные в CSS-таблицах, так как специфичность стилей в атрибуте style выше (за исключением стилей с !important ).
Чтобы указать значение конкретного CSS-свойства, мы можем использовать одноимённое отображение в style :
// Если мы хотим указать color:element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family:element.style.fontFamily = 'Arial'// Если мы хотим указать color: element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family: element.style.fontFamily = 'Arial'
Обратите внимание, что имена свойств в style . [ property Name ] записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.
Таким образом font — family превращается в font Family , а, например, background — color — в background Color .
При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:
CSS-свойства в JS-нотации
| CSS | JavaScript |
|---|---|
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| float | cssFloat |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| stroke-dasharray | strokeDasharray |
| stroke-dashoffset | strokeDashoffset |
| stroke-width | strokeWidth |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
На практике
Скопировать ссылку «На практике» Скопировано
Саша Беспоясов советует
Скопировать ссылку «Саша Беспоясов советует» Скопировано
В целом для управления стилями лучше использовать CSS. Можно использовать классы-модификаторы, чтобы придавать какие-то наборы стилей элементу.
Инлайновые стили имеют более высокую специфичность — их труднее переопределить, и это мешает нормальной работе со стилями элемента.
Пример. Мы пишем библиотеку, которая умеет красиво рисовать кнопки. Если мы установим цвет и размер кнопки с помощью инлайновых стилей, то пользователь библиотеки не сможет их легко поменять. Использовать такую библиотеку никто не захочет
Однако есть некоторые случаи, когда манипуляция инлайн-стилями — это ок. Например, если мы хотим управлять отображением элемента точечно, и описывать это в CSS невозможно.
Представьте, что вы хотите сделать анимацию движения точки на экране так, чтобы движение было случайным. В CSS (пока что) этого сделать нельзя, только скриптами. И вот здесь изменение инлайновых стилей как раз кстати.
Для изменения таких стилей используется свойство style .
Используйте style , чтобы изменить или получить инлайновые стили элемента.
�� Чтобы переписать стиль элемента полностью, можно использовать css Text или set Attribute .
element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;')element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')
�� Чтобы обновить значение конкретного свойства, а остальные оставить нетронутыми, используйте style . [ property Name ] :
element.style.color = 'red'element.style.fontFamily = 'Arial'element.style.color = 'red' element.style.fontFamily = 'Arial'
�� Чтобы сбросить значение, присвойте ему null .
// Если у элемента прописано style="background-color: red; color: black;",// то такая запись:element.style.backgroundColor = null // . оставит только style="color: black;".// Если у элемента прописано style="background-color: red; color: black;", // то такая запись: element.style.backgroundColor = null // . оставит только style="color: black;".
�� Численным свойствам, таким как margin , padding , border — width и другим, следует указывать не только значение, но и единицу измерения:
element.style.marginTop = '50px'element.style.marginTop = '50px'
Управление классами и стилями элементов в JavaScript
В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.
Управление классом (классами) элемента
Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className . Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.
Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className :
.
Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.
Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:
.
DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.
Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.
Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.
Пример, в котором проверим наличие у элемента класса content__show :
.
Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList .
Свойство classList
Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.
- .add( className1[,className2. ] ) — добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
- .remove( className1[,className2. ] ) — удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
- .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false .
- .toggle( className [,flag] ) — переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр ( flag ) необязательный. По умолчанию он имеет значение undefined . Если ему установить значение true или false , то он будет работать как метод add или remove , т.е. либо добавлять класс к элементу, либо удалять его у него.
Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList :
// получим элемент c const sideBar = document.querySelector('#sidebar'); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle('hidden-xs'); // добавим три дополнительных класса sideBar.classList.add('col-xs-6', 'col-sm-4', 'col-md-3'); // удалим класс hidden-xs sideBar.classList.remove('hidden-xs'); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains('hidden-lg')) { sideBar.classList.add('hidden-md'); }
Объект classList является псевдомассивом, т.е. его можно перебрать как массив.
Пример, в котором переберём все классы classList :
.
Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.
Стили элемента
В DOM у каждого элемента есть свойство style , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.
Пример, как можно к элементу добавить стили через DOM-свойство style :
Квадрат
Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor . А, например, CSS-свойство с браузерным префиксом -webkit-border-radius - как WebkitBorderRadius .
Удаление стилей
Например, установим body некоторый цвет фона:
document.body.style.backgroundColor = '#eee';
Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:
document.body.style.backgroundColor = '';
Примеры использования DOM-свойства style для установки стилей элементам.
.
.
.
Свойство cssText
Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style .
Пример, в котором установим стили "font-size:40px; color:blue;" элементам с классом intro :
.
При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.
Выполнить операцию, аналогичную той которую выполняет свойство style.cssText , можно ещё через метод setAttribute .
.
Задания
1. Написать скрипт, используя classList , для установления элементу с классом text трех классов: size-40 , color-red и bg-yellow :
Некоторый текст.
2. Написать код для установления стиля "width: 180px; height: 180px;" всем элементам на странице с классом, начинающимся со слов block- .
Стиль элемента
Javacript позволяет значительно изменить элемент страницы. В том числе, можно изменить стиль элемента с помощью JavaScript. Можно изменить значения CSS-свойств, которые уже установлены, а также добавить другие CSS-саойства. Это делается через свойство style , которое есть у DOM-объектов. Само это свойство является объектом, который содержит CSS-свойства элемента. Чтобы установить определённое CSS-свойство, нужно обратиться к соответствующему свойству объекта style .
Имена CSS-свойств совпадают с именами свойств объекта, только пишутся немного по-другому. Если имя свойства состоит из нескольких слов, то в CSS для разделения слов используется дефис. А свойства объекта пишутся по обычным правилам JavaScript, то есть новое слово начинается с большой буквы.
Значением свойства всегда является строка. Значения пишутся так же, как в CSS.
Для примера создадим блок, которому будем устанавлявать свойства:
Текст
Теперь установим этому блоку свойство padding :
let block = document.getElementById('block'); block.style.padding = '10px';
Попробуйте установить блоку другие свойства.
Свойство cssText удаляет все свойства объекта style и заменяет их своими. Значением этого свойства является строка, в которой может быть указано несколько свойств по всем правилам CSS. Для примера создадим ещё один блок, зададим ему свойство, а затем заменим его другими свойствами.
Другой блок
let newBlock = document.getElementById('newblock'); newBlock.style.marginTop = '10px'; newBlock.style.cssText = 'color: Green; font-size: 40px';
Отступ сверху у блока отменён, вместо этого появились другие свойства. А вот рамка у блока осталась, ведь она задана не в объекте style , а с помощью селектора.
Есть ещё один способ изменения стиля - через классы. В стиле создаётся новый класс, ему указываются нужные свойства. А в скрипте объетку просто присваивается этот класс и объект получает свойства класса.
Получение стиля
Элемент страницы не всегда получает CSS-свойства в таком виде, как они написаны. Есть свойства, которые созданы для краткого указания отступов и рамки для всех сторон блока. Например, свойство padding . В браузере эти свойства преобразуются в отдельные свойства для каждой стороны блока. padding преобразуется в padding-top , padding-right , padding-bottom и padding-left . Выведем свойство padding-left у первого блока:
console.log(block.style.paddingLeft); //выведет: 10px
Хотя мы не устанавливали именно это свойство, но оно есть, потому что в таком виде содержится стиль элементов в браузере.
Устанавливать стиль можно с помощью любых CSS-свойств. А вот получать нужно отдельные свойства для каждой стороны блока. Если получить свойство, устранавливающее стиль со всех сторон блока, то результат может в разных браузерах быть разный.
Объект style содержит не все CSS-свойства элемента, а только те, которые установлены через этот объект, а также те, которые заданы в атрибуте тэга style . Стиль, полученный элементом через селекторы, нельзя узнать с помощью объекта style . Для этого используется метод getComputedStyle() . Он возвращает объект, содержащий все CSS-свойства элемента, которые есть на данный момент.
getComputedStyle (элемент, псевдоэлемент);
псевдоэлемент - используется для получения свойств псевдоэлемента. Необязательный параметр.
Определим свойства блока:
let blockStyle = getComputedStyle(block); console.log(blockSyle.borderLeftWidth);
Цвет элемента можно указывать в разных системах. Но свойства объектов содержат цвет в системе RGB. Это не зависит от того, как указан цвет, через объект style или с помощью селектора. Результат будет один и тот же. Это несколько усложняет работу с цветом. Если Вам нужно получить цвет элемента и как-то использовать его, то придётся работать со строкой, содержащей ненужные символы.
Коприрование материалов сайта возможно только с согласия администрации
2017 - 2023 © basecourse.ru Все права защищены