利用原生JavaScript获取元素样式只是获取而已


Posted in Javascript onOctober 08, 2014

ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。(论坛整理)

1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性

var ele = document.getElementById('ele');

ele.style.color; //获取颜色

2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
window.getComputedStyle("元素", "伪类");

这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用
var ele = document.getElementById('ele');

var styles = window.getComputedStyle(ele,null);

styles.color; //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。

3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。

var ele = document.getElementById('ele');

var styles = ele.currentStyle;

styles.color;

注意:对于综合属性border等,ie返回undefined,其他浏览器有的返回值,有的不返回,但是borderLeftWidth这样的属性是返回值的

4、getPropertyValue():获取CSS样式的直接属性名称

var ele = document.getElementById('ele');

window.getComputedStyle(ele,null).getPropertyValue('color');

注意:属性名不支持驼峰格式,IE6-8不支持该方法,需要使用下面的方法

5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式

var test = document.getElementById('test');

window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意:该方法只支持IE6-8。

下面的获取样式方法兼容IE、chrome、FireFox等

function getStyle(ele) {
var style = null;

if(window.getComputedStyle) {

style = window.getComputedStyle(ele, null);

}else{

style = ele.currentStyle;

}

return style;

}

在JQuery中,常用css()获取样式属性,其底层运作就应用了getComputedStyle以及getPropertyValue方法。
Javascript 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
javascript学习笔记(八)正则表达式
Oct 08 #Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 #Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 #Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 #Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 #Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 #Javascript
JavaScript中获取样式的原生方法小结
Oct 08 #Javascript
You might like
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python采用Django开发自己的博客系统
2020/09/29 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
考核评语大全
2014/04/29 职场文书
2014中考励志标语
2014/06/05 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
公司开业致辞
2015/07/29 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers
MySQL数据库之存储过程 procedure
2022/06/16 MySQL