设置和获取元素的CSS样式-plainJs-嗨前端

设置和获取元素的CSS样式

获取计算的样式属性或设置元素的CSS属性。

getComputedStyle()方法（IE < 9: 使用 currentStyle属性）可以获取网页渲染完成后元素的最终生效的样式（同一个元素可能有对歌class，会有样式覆盖），可以通过下面的方式获取样式值

  
var el = document.querySelector('div');

// getComputedStyle for modern browsers, currentStyle for IE
var style = window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle;

// reading properties
console.log(style.backgroundColor);

// reading properties containing hyphens
console.log(style['-webkit-text-size-adjust']);
      
注意元素属性style的区别，元素的style属性虽然也能获取部分样式，但是只能获取在内敛样式中设置了的样式值,没有在内敛样式中定义的样式属性并不能获取到。并且注意，内敛样式可能并不是最终的样式，因为存在样式覆盖的情况，如果想获取元素的最终样式值，请使用getComputedStyle()
 设置样式属性直接通过元素的style属性来设置
  
var el = document.querySelector('div');

el.style.backgroundColor = 'green';
el.style.display = 'none';
el.style['border-radius'] = '5px';
      
同时设置多个样式值可以使用cssText
  
el.style.cssText += 'background: green; display: none;';
      
注意：新样式字符串将附加到现有样式字符串（+=）后面。 当前样式属性将被覆盖并标准化。 当覆盖整个cssText时，所有先前设置的样式都将被丢弃。
 但是，此方法相当慢，因此最好使用一个小的帮助程序来通过键/值对的对象设置多种样式：
  
function css(el, styles) {
    for (var property in styles)
        el.style[property] = styles[property];
}

// example
var el = document.querySelector('div');
css(el, { background: 'green', display: 'none', 'border-radius': '5px' });
      
这个函数可对应于jQuery的$.css(obj)方法。