当前位置:  首页  >  前端开发  >  JavaScript

js怎么获取css属性

js获取css属性的方法:使用【getComputedStyle(div)】方法获取,代码为【varadocument.defaultView.getComputedStyle(div);】。

js获取css属性的方法:使用【getComputedStyle(div)】方法获取,代码为【var a = document.defaultView.getComputedStyle(div);】。

js获取css属性的方法:

在使用原生js做开发的时候,你应该会遇到需要获取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);

相关免费学习推荐:javascript(视频)

以上就是js怎么获取css属性的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有