原生js获取设置元素样式及属性值小结

一、元素样式

1、原生js获取元素样式

以下使用dom代表元素节点。

1、dom.style.xx
  如要获取一个元素的color，可以使用 元素.style.color 。需要注意的是这种方式只能获取元素的行内样式值，无法获取到定义在<style></style>标签和通过<link href="xx.css">加载进来的样式。语法如下：

let el= document.getElementById("test");
el.style.color;

2、getComputedStyle()
  window对象的getComputedStyle方法，第一个参数是Element对象，第二个参数可以是null、空字符串、伪元素字符串，该方法返回一个只读的表示计算样式的CSSStyleDeclaration对象，它代表了实际应用在指定元素上的最终样式信息，即各种CSS规则叠加后的结果。语法如下：

let el= document.getElementById("test");
let demo = window.getComputedStyle(el, null);
console.log(demo.height)
console.log(demo.length)//样式数量

  需要注意的是：Firefox和Safari会将颜色转换成rgb格式，如果text节点上没有任何样式，通过demo.length来查看浏览器默认样式的个数。IE6-8不支持该方法，需要使用下面的方法。

3、dom.currentStyle
  currentStyle 是IE浏览器自己的一个属性，其语法与dom.style类似，差别在于dom.currentStyle返回的是元素最终的样式信息（包括标签<style></style>、行内样式和通过<link href="xx.css">加载进来的样式等）。语法如下：

let el= document.getElementById("test");
let demo = el.currentStyle; 
console.log(demo.height)

注意：只适用于ie。

4、CSSStyleDeclaration getPropertyValue() 方法，返回指定的css的属性的值。语法如下：

let el= document.getElementById("test");
let demo = window.getComputedStyle(el, null).getPropertyValue("background-color");
console.log(demo)

注意：属性名不支持驼峰格式，IE6-8不支持该方法。

5、getAttribute(‘style’)
和dom.style.xx一样，只能获取行内样式。

let el= document.getElementById("test");
let demo = el.getAttribute("style");
console.log(demo) 

2、样式相关小结

  jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法，当我们使用原生的js开发时就可以通过以上方法获取元素的值。
  下面是一个兼容ie,firefox,chrome等浏览器的获取元素样式的方法，可以应用到项目中:

function getStyle(dom) {
	let style = null;
	if(window.getComputedStyle) {
		style = window.getComputedStyle(dom, null);
	}else{
		style = dom.currentStyle;
	}
	return style;
}

3、原生js修改元素样式

• dom.style.xx=‘xx’  或  dom.style.textAlign=‘xx’  或  dom.style[‘text-align’]=‘xx’
• dom.style.cssText=‘width:300px’;
• dom.setAttribute(‘style’, ‘font-size: 15px !important’)
• el.style.setProperty(“background-color”,‘orange’);//可以参考：https://www.runoob.com/jsref/obj-cssstyledeclaration.html
• 改变元素class名

二、原生js获取设置元素属性值

1、getAttribute(‘attr_name’) 获取元素属性值。

let el= document.getElementById("test");
let demo = el.getAttribute("id");
console.log(demo)

添加元素属性：obj.setAttribute(‘attr_name’,‘attr_value’);
删除元素属性：obj.removeAttribute(‘attr_name’);