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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
js改变Iframe中Src的方法
May 05 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 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
php下载远程文件类(支持断点续传)
2008/11/14 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python 实现IP子网计算
2021/02/18 Python
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
StringBuilder和String的区别
2015/05/18 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
一年级班主任寄语
2014/01/19 职场文书
运动会100米解说词
2014/01/23 职场文书
计算机实训报告范文
2014/11/05 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
Python requests用法和django后台处理详解
2022/03/19 Python