获取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. 自动化运维工具-pssh工具安装配置及简单使用讲解

    1.先决条件:安装pssh工具要求python版本大于2.4即可. 安装pssh工具的主机针对远程主机需要配置免秘钥认证: ssh-keygen -t rsa ssh-copy-id [remoteh ...

  2. iOS自定义结构体

    一.提要 通过以官方的CGSize为例,自定义Objective-C中的结构体,并使用. 二.CGSize 1.系统定义的CGSize结构体 struct CGSize { CGFloat width ...

  3. [DPI][suricata] suricata 配置使用

    前文: [DPI] suricata-4.0.3 安装部署 至此, 我们已经拥有了suricata可以运行的环境了. 接下来,我们来研究一下它的功能, 首先,分析一下配置文件: /suricata/e ...

  4. 【实战】Docker 入门实战一:ubuntu 和 centos 安装Docker

    Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...

  5. dbgrideh添加列、多表头及属性

    (一)动态添加列 procedure TForm2.FormCreate(Sender: TObject); var   vCol : TColumn; begin   vCol := DBGrid1 ...

  6. el表达式获取对象属性值 返回值类型

    实现 数字页码时 遇到的一个问题. 后端servlet 在request.setAttribute("page",page); page 为pagebean的实例对象,pagebe ...

  7. 并查集——合作网络D306

    合作网络D306             运行时间限制:1000ms: 运行空间限制:51200KB: 试题描述 有n个结点,初始时每个结点的父结点都不存在.你的任务是执行若干次Set操作和Query ...

  8. sublime phpfmt 的格式化

    php格式化有几种,这里只说phpfmt.这个插件只支持php7.0+,所以在安装php环境应该支持php7.0.至于低版本,在packagecontrol.io对应的插件页面也又提到. 在subli ...

  9. Oracle内置函数SQLCODE和SQLERRM的使用

    在我们写proc程序中经常要有错误处理,在错误处理中我们经常要输出错误信息来给帮助我们分析和解决错误原因,从而更正数据.这时候就会用到SQLCODE和SQLERRM. SQLCode:数据库操作的返回 ...

  10. Intellij IDEA中修改Maven项目的项目名称

    1. 原项目名:votesystem-redis     想要重命名成新项目名:votesystem 2. 我们对此项目名进行Rename 3. 再对此项目所在的目录下进行修改 4. 重新打开项目 若 ...