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 相关文章推荐
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
token 机制和实现方式
Dec 15 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
吐槽一下我所了解的Node.js
Oct 08 #Javascript
Node.js 的异步 IO 性能探讨
Oct 08 #Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 #Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 #Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 #Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 #Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 #Javascript
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
详解vue 命名视图
2019/08/14 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
微信跳一跳游戏python脚本
2020/04/01 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Python容器类型公共方法总结
2020/08/19 Python
LINUX下线程,GDI类的解释
2016/12/14 面试题
Why do we need Unit test
2013/01/03 面试题
最新会计专业求职信范文
2014/01/28 职场文书
农民工工资发放承诺书
2014/03/31 职场文书