inline CSS

1. Получить значения inline свойств - GET()

   • elem.style.property
   • elem.getAttribute(property)
   • Недостатки - получите только inline свойста, а не реальные свойства элемента. Например !important может перебить приоритет inline свойста.

   Недостатки

   HTML 
   <div class="green" style="color: red;"> Hello </div>
   css 
   .green { color: green !impotrant }
   JS
   let elemColor = document.querySelector('.green').style.color; 
   console.log( elemColor )
                   

   Недостатки

   CSS	style
   padding-top	paddingTop
   margin-left	marginLeft
   border-bottom-left-radius	borderBottomLeftRadius

2. Установить значения inline свойств - SET(value)

   • elem.style.property = value
   • elem.setAttribute(property, value)

   • Недостатки

     Перезапись атрибутов методом setAttribute

     HTML 
     <div class="text" style="color: red;"> Hello </div>
     JS
     let elem = document.querySelector('.text');
     elem.style.backgroundColor = " orange ";
     HTML 
     <div class="text" 
          style="background-color:  orange; color: red;"> 
         Hello
     </div>
                             

   • HTML 
     <div class="text" style="color: red;"> Hello </div>
     JS
     let elem = document.querySelector('.text');
     elem.setAttribute('style','background-color: orange');
     HTML 
     <div class="green" style="background-color: orange;"> 
         Hello 
     </div>
     
                             

3. Используйте window.getComputedStyle(elem) для вычесленных CSS свойств.