获取css 样式的方法有三种 : style, currentStyle , getComputedStyle

style  (无兼容性问题)

  获取语法: ele.style.attr ; 设置语法:ele.style.attr = '值'

  大多数情况下,javascript中获取和设置style样式都是通过类似" div.style.fontSize" 的方式 , 但是该方式只能获取行内样式 , 即通过link或者<style>引入的样式无法获取, 如行内没设置样式, 返回为空值。

currentStyle (支持IE, 不支持FF和Chrome)

  语法 ele.cureentStyle.attr或者 ele.currentStyle[attr]

  当在script中打印 console.log(div.currentStyle)时, 在IE上输出[object Object], 而在Chrome中输出undefined, console.log(window.getComputedStyle)则相反.

getComputedStyle (支持FF和Chrome,不支持IE)

  语法 window.getComputedStyle(ele, null).attr 或者  window.getComputedStyle(ele, null)[attr]

解决currentStyle和getComputedStyle的兼容性问题, 注意,两者都只能获取css而不能设置css

 function getStyle (ele, styleName) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[styleName]
} else {
return ele.currentStyle[styleName]
}
} // 调用
getStyle(div, 'fontSize')

javascript获取style兼容性问题的更多相关文章

  1. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  2. 如何用javascript获取和设置css3属性

    ==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...

  3. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  4. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  5. javascript 获取下一个节点

    下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...

  6. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  7. javascript 获取图片原始尺寸

    javascript 获取图片原始尺寸 function getImgInfo(url){ var img = new Image(), loaded = false; var info = {}; ...

  8. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  9. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

随机推荐

  1. 用CountDownLatch提升请求处理速度

    countdownlatch是java多线程包concurrent里的一个常见工具类,通过使用它可以借助线程能力极大提升处理响应速度,且实现方式非常优雅.今天我们用一个实际案例和大家来讲解一下如何使用 ...

  2. Mybatis 不同使用方式

    前言 工作这么多年,ORM框架一直选择Mybatis框架. Mybatis的使用方式也一直在变,总体来说是越来越简单.写篇文章对各使用方式做个总结... 正文 一.Mybatis典型用法 1. 正常执 ...

  3. iOS引用类型

    强引用, 默认引用类型.被强引用指向的内存不被释放.强引用会对被引用对象的引用计数器+1,从而扩展对象的生命周期. 弱引用, 弱引用是医用特殊的引用类型.它不会增加引用计数器,因而不会扩展对象的生命周 ...

  4. 网络层block,delegate之优劣分析

    正常情况下, block 缺点: 1.block很难追踪,难以维护 2.block会延长先关对象的生命周期 block会给内部所有的对象引用计数+1, 一方面会带来潜在的循环引用(retain cyc ...

  5. Linux 配置SFTP,配置用户访问权限

    之前我服务器是使用的Windows Server 2003,这段时间由于访问量变大我还是机智的换成Linux了,在搭建FTP的时候看到网上都是推荐vsftpd,不过我不推荐这个家伙,看官且看下文. 我 ...

  6. Page3:组合系统状态空间输入输出描述、矩阵指数函数性质[Linear System Theory]

    内容包含组合系统的状态空间描述以及输入输出描述,零输入响应的概念以及矩阵指数函数的性质

  7. mysql设置指定ip访问,用户权限相关操作

    基础语法GRANT priv_type ON database.table TO user[IDENTIFIED BY [PASSWORD] 'password'] [,user [IDENTIFIE ...

  8. LeetCode 804 Unique Morse Code Words 解题报告

    题目要求 International Morse Code defines a standard encoding where each letter is mapped to a series of ...

  9. 《HTTP - 理解 Content-Type》

    一:引言 在此之前先看一个小例子:(html 上传文件,服务端为PHP) <?php var_dump($_FILES);?> <!DOCTYPE html> <html ...

  10. 理解Python的双下划线命名(转)

    add by zhj:今天在学习SimpleHTTPServer的源代码时,看到了Python标准库SocketServer模块中有个BaseServer类,该类的__init__方法定义如下 def ...