JS获取CSS样式(style/getComputedStyle/currentStyle)


Posted in Javascript onJanuary 19, 2016

CSS的样式分为三类:
内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
currentStyle是IE浏览器的一个属性,返回的是CSS样式对象

element指JS获取的DOM对象
element.style //只能获取内嵌样式
element.currentStyle //IE浏览器获取非内嵌样式
window.getComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式
注:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。

下面的html中包含两种css样式,id为tag的div是内嵌样式,而id为test的div样式为内部样式.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="Yvette Lau">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>
      #test{
        width:500px;
        height:300px;
        background-color:#CCC;
        float:left;
      }
    </style>
  </head>
  <body>
    <div id = "test"></div>
    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
  </body>
</html>

JS部分

<script type = "text/javascript">
  window.onload = function(){
    var test = document.getElementById("test");
    var tag = document.getElementById("tag");

    //CSS样式对象:CSS2Properties{},CSSStyleDeclaration
    console.log(test.style); //火狐返回空对象CSS2Properties{},谷歌返回空对象CSSStyleDeclaration{} 
    console.log(tag.style); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
    //element.style获取的是内嵌式的style,如果不是内嵌式,则是一个空对象

    console.log(tag.style.backgroundColor);//pink
    console.log(tag.style['background-color']);//pink
    //获取类似background-color,border-radius,padding-left类似样式的两种写法啊

    console.log(test.currentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
    console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ,火狐返回CSS2Properties{……}
    console.log(window.getComputedStyle(test))
    //效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

    console.log(test.currentStyle.width);//500px(IE)
    console.log(window.getComputedStyle(test).width); //500px;
    console.log(window.getComputedStyle(test)['width']);//500px;
    //document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]   
  }
</script>

以上的例子仅是验证前面的论述是否正确。

为了简单,我们也可以对获取样式做一个简单的封装。

function getStyle(element, attr){
      if(element.currentStyle){
        return element.currentStyle[attr];
      }else{
        return window.getComputedStyle(element,null)[attr];
      }
    }
    console.log(getStyle(test,"cssFloat"));//left
    console.log(getStyle(test,"float"));  //left,早前FF和chrome需要使用cssFloat,不过现在已经不必
    console.log(getStyle(test,"stylefloat"));//火狐和谷歌都是undefined
    console.log(getStyle(test,"styleFloat")); //IE9以下必须使用styleFloat,IE9及以上,支持styleFloat和cssFloat

    console.log(window.getComputedStyle(test).getPropertyValue("float"))

对应float样式,IE中使用的是styleFloat,而早前的FF和chrome使用的是cssFloat,现在FF和Chrome已经支持float,还有一些其他的属性,不再一一列出,为了不去记忆这些差异点,我们引出两个访问CSS样式对象的方法:
getPropertyValue方法和getAttribute方法

IE9及其它浏览器(getPropertyValue)
window.getComputedStyle(element, null).getPropertyValue(“float”);
element.currentStyle.getPropertyValue(“float”);
getPropertyValue不支持驼峰写法。(兼容IE9及以上,FF,Chrom,Safari,Opera)
如:window.getComputedStyle(element,null).getPropertyValue(“background-color”);

对于IE6~8,需要使用getAttribute方法,用于访问CSS样式对象的属性

element.currentStyle.getAttribute(“float”);//不再需要写成styleFloat
element.currentStyle.getAttribute(“backgroundColor”);//属性名需要写成驼峰写法,否则IE6不支持,如果无视IE6,可以写成”background-color”

以上就是本文的全部内容,希望对大家的学习有所帮助,轻松使用JS获取CSS样式。

Javascript 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JS搜狐面试题分析
Dec 16 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
详解javascript实现自定义事件
Jan 19 #Javascript
JS拖拽组件学习使用
Jan 19 #Javascript
理解JS绑定事件
Jan 19 #Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 #Javascript
jQuery unbind()方法实例详解
Jan 19 #Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
You might like
一篇入门的php Class 文章
2007/04/04 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Angular2实现组件交互的方法分析
2017/12/19 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python list运算操作代码实例解析
2020/01/20 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
施工材料员岗位职责
2014/02/12 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
MySQL 数据类型详情
2021/11/11 MySQL