.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 | 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
Как правило, начинающие изучать веб-разработку люди уже знают, как легко можно поменять внешний вид элемента с помощью CSS стилей. Но менять стили можно и через JavaScript. Когда же наступает необходимость это делать через JavaScript? Первое, что приходит в голову — это для создании анимаций.
Изменение стилей через CSS
У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.
//HTML код
Польза ананасов
//CSS код
.container width: 400px;
border: 10px solid plum;
margin: 20px auto;
>
#heading font-size: 24px;
font-weight: 700;
color: black;
font-family: ‘Arial Narrow Bold’, sans-serif;
text-align: center;
>
Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.
Заголовок стал фиолетовый.
Изменение стилей через JavaScript
Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:
Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение — фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект — style, в свойствах которого хранятся все стили элемента h1.
// получение элемента по селектору
let headingElement = document.querySelector(‘#heading’);
// обращение к интересующему свойству и присвоение нового цвета
headingElement.style.color = ‘violet’;
Цвет заголовка опять поменялся на фиолетовый.
Названия свойств
Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.
let containerElement = document.querySelector(‘.container’);
containerElement.style.border-color = ‘black’; // нельзя писать border-color
Упс! Ничего не произошло и выскочило сообщение об ошибке, а цвет у рамки не поменялся. Почему не сработало? Ведь в обычном CSS мы бы так и написали border-color: black. Все дело в дефисе, имена свойств в JavaScript не могут содержать дефис. Поэтому все CSS свойства в названиях которых есть дефис, нужно преобразовать в другой синтаксис. Для этого мы убираем дефис и пишем первую букву второго слова, заглавной. Такой стиль написания называется camelCase (верблюжий регистр), напоминающий горбы верблюда.
let containerElement = document.querySelector(‘.container’);
containerElement.style.borderColor = «black»; // так правильно borderСolor
Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.
Заключение
Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты — JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.
Создано 05.04.2021 10:14:06
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.