.style

HTMLElement.style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через атрибут style.

С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style.

Чтобы получить значения инлайновых стилей с помощью свойства style, мы можем записать:

        
          
          const element = document.getElementById("someElement")const inlineStyles = element.style
          const element = document.getElementById("someElement")
const inlineStyles = element.style

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом случае в значение inlineStyles запишется объект CSSStyleDeclaration, который будет в себе содержать все инлайновые стили, которые содержит элемент element.

Чтобы задать стили для элемента, мы можем использовать несколько способов. Либо через cssText, чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через setAttribute().) Либо через отдельные свойства в style.[propertyName].

        
          
          // Следующие две записи работают одинаково// и устанавливают несколько стилей в одном выражении:element.style.cssText = "color: blue; border: 1px solid black"element.setAttribute("style", "color:red; border: 1px solid blue;")// Следующая — устанавливает значение определенного свойства,// оставляя другие значения стиля нетронутыми:element.style.color = "blue"
          // Следующие две записи работают одинаково
// и устанавливают несколько стилей в одном выражении:
element.style.cssText = "color: blue; border: 1px solid black"
element.setAttribute("style", "color:red; border: 1px solid blue;")

// Следующая — устанавливает значение определенного свойства,
// оставляя другие значения стиля нетронутыми:
element.style.color = "blue"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

HTMLElement.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.[propertyName] записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.

Таким образом font-family превращается в fontFamily, а, например, background-color — в backgroundColor.

При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:

        
          
          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 = "red"element.style.fontFamily = "Arial"
          element.style.color = "red"
element.style.fontFamily = "Arial"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          // Если у элемента прописано 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;".

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          element.style.marginTop = "50px"
          element.style.marginTop = "50px"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать