利用原生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 相关文章推荐
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
隐性调用php程序的方法
2015/06/13 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python获取当前函数名称方法实例分享
2018/01/18 Python
python实现批量修改文件名
2020/03/23 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
外企C语言笔试题
2013/11/10 面试题
护理专业推荐信
2013/11/07 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
三年级语文教学反思
2014/02/01 职场文书
技术股份合作协议书
2014/10/05 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
二年级作文之动物作文
2019/11/13 职场文书