js中获取css属性 -凯发真人娱乐

在使用原生做开发的时候，你应该会遇到需要获取css属性，然后发现好像直接获取是不行的。这里提供两种在原生js中获取css属性的方法

直接获取会失败，举个栗子

---

window.onload = function() {

	var but = document.getelementbyid('button');

	var div = document.getelementbyid('getstyle');

	but.onclick = function() {

		alert(div.style.width);//弹出空的对话框

	}

}

---

使用getcomputedstyle(div)方法
用法示例

---

window.onload = function() {

	var but = document.getelementbyid('button');

	var div = document.getelementbyid('getstyle');

	but.onclick = function() {

		var a = document.defaultview.getcomputedstyle(div);

		alert(a.width);//100px

	}

}

---

注意事项

1. 获取到的是浏览器计算后的样式，如果你去获取background,你会得到下面结果

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

所以请清楚指明你要获取的样式，像这样

alert(a.backgroundcolor);//red

2. 写名字的时候不要有空格
'div'不可以是' div'
3. 不要获取未设置的样式，不兼容

解决兼容性： ie8一下版本不能使用getcomputedstyle方法，而要用currenrstyle方法

---

a = div.currentstyle;
alert(a.width);

---

js中获取css属性的相关教程结束。