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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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
PHP令牌 Token改进版
2008/07/18 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
php实现文件下载实例分享
2014/06/02 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
python创建临时文件夹的方法
2015/07/06 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
财务担保书范文
2014/04/02 职场文书
挂职学习心得体会
2014/09/09 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang