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 新浪网易的评论块制作
Jul 01 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
js实现分割上传大文件
2016/03/09 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python完全新手教程
2007/02/08 Python
python实现井字棋游戏
2020/03/30 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
年终晚会活动方案
2014/08/21 职场文书
送给客户微信问候语!
2019/07/04 职场文书
2019 入党申请书范文
2019/07/10 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python