Element style как изменить
Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:
- Изменение свойства style
- Изменение значения атрибута class
Свойство style
Свойство style представляет сложный объект CSSStyleDeclaration и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS, к которым можно обратиться следующим образом:
element.style.свойствоCSS
Например, установим цвет шрифта заголовка:
METANIT.COM Home Page
Здесь для заголовка в качестве цвета устанавливаем синий цвет navy. В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:
#header
Однако ряд свойств css в названиях имеют дефис, например, font-family . В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:
const header = document.getElementById("header"); header.style.fontFamily = "Verdana";
Свойство className
С помощью свойства className можно получить или установить значение атрибута class элемента html. Например:
METANIT.COM .header-color .header-fontHome Page
Здесь получаем текущий класс заголовка и затем изменяем его на новый класс — «header-color». Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style .
Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:
header.className = header.className + " header-color";
И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:
header.className = "";
Свойство classList
Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList . Это свойство представляет объект, реализующий следующие методы:
- add(className) : добавляет класс className
- remove(className) : удаляет класс className
- toggle(className) : переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется
METANIT.COM .header-color .header-font .header-sizeHome Page
Стоит отметить, что метод toggle() дополнительно может принимать условие в качестве второго параметра — если это условие верно (возвращает true ), то класс переключается:
const i = 5; const condition = i > 0; // условие const header = document.getElementById("header"); header.classList.toggle("header-color", condition); // переключаем класс header-color по условию
При необходимости мы можем перебрать все классы из списка classList или получить отдельные классы по индексу:
// перебор списка классов for(headerClass of header.classList) < console.log(headerClass); >console.log(header.classList[0]); // первый установленный класс
.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'
Как изменить с помощью .style несколько параметров?
Как таким образом изменить несколько параметров style ?
При создании таких же строк выполняется только последняя, игнорируются все предыдущие.
Отслеживать
73.5k 110 110 золотых знаков 38 38 серебряных знаков 55 55 бронзовых знаков
задан 31 мая 2022 в 13:17
3 1 1 бронзовый знак
Рекомендую никогда так не делать. Задавать стили исключительно в CSS, а в JS только оперировать добавлением/удалением классов/идентификаторов этих самых стилей
31 мая 2022 в 13:27
Точно также, как в теге
31 мая 2022 в 13:30
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Можно установить стили так:
document.getElementById("simple").style.cssText = ` display: block; position: absolute; `; или в одну строку
document.getElementById("simple").style.cssText = "display: block; position: absolute"; let styles = ` font-size:15em; color:red; transform:rotate(20deg)` document.getElementById("simple").style = styles; Но рекомендую никогда так не делать. Задавать стили исключительно в CSS, а в JS только оперировать добавлением/удалением классов/идентификаторов этих самых стилей
Изменение CSS стилей элемента в JS?
В 2015 году изменять стили напрямую через JavaScript считалось некорректным способом, все рекомендовали изменять стили элемента путём добавления дополнительного CSS класса с уже заданными стилями. По причине того, что при обращении к элементу в JS и изменении стилей методом style DOM дерево полностью перерисовывается.
Так вот на сегодняшний день в 2023-ем году что-то изменилось? Я всё по прежнему должен создавать дополнительный класс или же устанавливать атрибут со стилями, даже когда я меняю 1-2 стиля?
- Вопрос задан 24 июл. 2023
- 152 просмотра
1 комментарий
Простой 1 комментарий
Бывают случаи, когда этого не избежать. Например (первое, что пришло в голову), нужно при изменении размера экрана «на лету» вычислять размер какого-то блока.
Во всех остальных случаях проще и эффективнее изменить класс элемента (active, hidden, error, success и т.п.).
Решения вопроса 1
iljaGolubev @iljaGolubev
Ничего не изменилось: вы по-прежнему можете изменять стили напрямую у элемента.
при обращении к элементу в JS и изменении стилей методом style DOM дерево
Не скажу как раньше было, но и сейчас при неудачной вёрстке можно вызвать reflow для всего документа даже при применении класса. Изменение шрифта и так и так заставит браузер что-то пересчитать.
Другое дело, что сейчас есть техники позволяющие минимизировать вычисления: сказать браузеру, что пересчитывать нужно только определённую часть (утрирую).
Есть tailwindcss с новым (по отношению к 2015 году) подходом — чтобы поменять 1-2 стиля нужно добавить/удалить 1-2 класса. Часто это удобнее.
Используя классы вместо style код становится понятнее, легче поменять значения для повторяющихся стилей, следовательно меньше багов.
Впрочем, от style всё равно не уйти полностью. Например, динамически высчитываемые анимации — только class не обойтись.
Ответ написан 24 июл. 2023
Комментировать
Нравится 3 Комментировать
Ответы на вопрос 1
keep calm and do banner
Конечно, вот пример того, как изменить CSS стили элемента в JavaScript:
const element = document.getElementById("my-element"); element.style.color = "red";Этот код изменит цвет текста элемента с #000000 на #FF0000.
Вы также можете использовать свойство style для изменения других свойств CSS элемента, таких как размер шрифта, ширина и высота. Например, следующий код изменит размер шрифта элемента на 24 пикселя:
const element = document.getElementById("my-element"); element.style.fontSize = "24px";Вы также можете использовать метод setProperty() для изменения свойств CSS элемента. Например, следующий код изменит цвет текста элемента на красный и размер шрифта на 24 пикселя:
const element = document.getElementById("my-element"); element.setProperty("color", "red"); element.setProperty("fontSize", "24px");