利用原生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 相关文章推荐
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
原生js实现随机点餐效果
Dec 10 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
Django实现自定义404,500页面教程
2017/03/26 Python
浅谈python常用程序算法
2019/03/22 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python绘制封闭多边形教程
2020/02/18 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
工程质量月活动方案
2014/02/19 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
项目建议书范文
2014/05/12 职场文书
质量安全标语
2014/06/07 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
消费者理赔投诉书
2015/07/02 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python