码迷,mamicode.com
首页 > Web开发 > 详细

js中获取css属性

时间:2016-12-20 00:24:21      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:idt   注意事项   alert   code   current   block   function   compute   用法   

直接获取

window.onload = function() {
	var but = document.getElementById(‘button‘);
	var div = document.getElementById(‘getStyle‘);
	but.onclick = function() {
		alert(div.style.width);//弹出空的对话框
	}
}

getComputedStyle(div)方法

  1. 用法
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
	}
}

2.注意事项

  1. 获取到的是浏览器计算后的样式
  2. "div.background"复合样式,不要获取
alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

用单一样式

alert(a.backgroundColor);//red
  1. 写名字的时候不要有空格
‘div‘不可以是‘ div‘

4.不要获取未设置的样式,不兼容

  1. 解决兼容性: ie8一下版本不能使用getComputedStyle方法,而要用currenrStyle方法,用currentStyle
a = div.currentStyle;
alert(a.width);

js中获取css属性

标签:idt   注意事项   alert   code   current   block   function   compute   用法   

原文地址:http://www.cnblogs.com/huyuzhu/p/6200863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!