利用原生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 相关文章推荐
DOM精简教程
Oct 03 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
详细讲解JS节点知识
2010/01/31 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python fileinput模块使用实例
2015/06/03 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python学生管理系统代码实现
2020/04/05 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
HTML5进度条特效
2014/12/18 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
法律进企业活动方案
2014/03/04 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
六查六看自查报告
2014/10/14 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
python 常用的异步框架汇总整理
2021/06/18 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android