获取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. phoenix技术(安装部署和基本使用)讲解

    1.phoenix简介 Apache Phoenix是构建在HBase之上的关系型数据库层,作为内嵌的客户端JDBC驱动用以对HBase中的数据进行低延迟访问.Apache Phoenix会将用户编写 ...

  2. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle

    安装 webpack-node-externals yarn add -D webpack-node-externals

  3. Flink - CoGroup

    使用方式, dataStream.coGroup(otherStream) .where(0).equalTo(1) .window(TumblingEventTimeWindows.of(Time. ...

  4. stl, string不仅是charString, 更是byteString

     转载至:http://chzhou.blog.sohu.com/97459512.html 以前一直没有注意到STL中的string的length函数,但一直用它.天真的以为它会返回字符串的长度 ...

  5. 安装graphlab伤透了心,终于搞定了

    为了方便研究各种机器学习算法,我想用graphlab来辅助我对后续算法的研究.所以我的目标就是安装graphlab到我的windows笔记本中.而基于python的graphlab的安装最好是采用如下 ...

  6. linux基本介绍和使用

    基本介绍 Linux入门教程 快捷键     linux 快捷键 用户及用户组 linux之用户和用户组

  7. 洛谷P4052 [JSOI2007]文本生成器 AC自动机+dp

    正解:AC自动机+dp 解题报告: 传送门! 感觉AC自动机套dp的题还挺套路的,,, 一般就先跑遍AC自动机,然后就用dp dp的状态一般都是f[i][j]:有i个字符,是ac自动机上的第j个节点, ...

  8. 洛谷P4425 转盘 [HNOI/AHOI2018] 线段树+单调栈

    正解:线段树+单调栈 解题报告: 传送门! 1551又是一道灵巧连题意都麻油看懂的题,,,,所以先解释一下题意好了,,,, 给定一个n元环 可以从0时刻开始从任一位置出发 每次可以选择向前走一步或者在 ...

  9. 【Selenium】selenium中隐藏元素如何定位?

    前言 面试题:selenium 中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚 ...

  10. magento开发手册之目录结构

    magento是一个很优秀的电商系统,很多朋友会用它部署自己的电商网站,少不了二次开发.下面我们随着ytkah来一起认识一下magento开发手册之目录结构吧. /app – 程序根目录 /app/e ...