众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。

一、行内样式获取相对简单，通过element.style.attr（元素.style.属性）即可获取，示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JavaScript获取CSS样式</title>

 </head>

 <body>

     <!-- 给p标签设置行内样式并添加点击事件 -->

     <p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客园--开发者的网上家园</p>

     <script type="text/javascript">

         function show() {

             var obj = document.getElementsByTagName('p')[0];

             alert(obj.style.width);

         }

     </script>

 </body>

 </html>

运行：

通过element.style.attr即可获取行内样式属性值，也可设置属性值，形式如：obj.style.width = 300 + 'px';

二‘、非行内样式获取法，因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。

1、基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']

IE运行结果：

2、基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]

火狐运行结果：

二者兼容定法：

总结：以上就是JavaScript获取CSS样式的方法，其中获取非行内样式兼容IE和非IE可通过封装一个函数，实现多次调用，

切记：非行内样式获取法，只能获取不能设置。

重温JavaScript获取CSS样式的方法（兼容各浏览器）的更多相关文章

  1. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  2. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  3. 原生JavaScript获取css样式

    访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...

  4. 多浏览器兼容用javascript获取url参数的方法比较推荐的一种

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...

  5. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. js获取css样式方法

    一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...

  7. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  8. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  9. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

随机推荐

  1. Flask：使用jsonify()转换为JSON的数据在Chrome显示为Unicode编码

    Chrome 66,Flask 1.0.2,MongoDB 3.6.3, 创建了一个Flask应用,在将MongoDB中的数据使用PyMongo包获取后,再使用jsonify转换为JSON格式发送回请 ...

  2. JAVA汉字转拼音（取首字母大写）

    import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseT ...

  3. Animate.css 前端动画开发教程

    1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/  ,选择好后记住动画的名字在你下载的a ...

  4. No.13 selenium for python 单选框和复选框

    单选框 radio 点击图标,可以获取HTML中定位. 使用普通的ID定位就可以了 定位到指定元素,然后使用clicd选中即可 复选框 checkbox 勾选单个框,跟单选框一样,定位后点击就可以了 ...

  5. 洛谷P2018消息传递

    传送门啦 这个树形dp就没那么简单了,运用了一下贪心的思想 不同的排序方法对应着不同的转移方程,如果我们用 $ f[x] = max(f[x] , b[i] +cnt - i + 1) $ 来进行转移 ...

  6. 关于C语言的几个考试编程题目

    提交要求:1:邮件名称:学号后三位-题目编号-姓名-期中考试.例如:098-1-沈苗-期中考试2:不用附件提交,直接写邮件,内容包括编程思路(写一段自己对题目的认识.思路.技术细节等).源代码.运行结 ...

  7. Buffer对象的总结

    1.首先记录下php关于字符串长度的统计 <?php echo '<br>'; echo '<br>'; 2.Buffer对象为16进制的两位数,即FF 0-225: v ...

  8. UBB/HTML互相转换简单实现源码一览

    查看源码,主要用的就是正则匹配,多的不说,直接读码. 资源原地址:在线UBB/HTML转换 效果图如下 以下源码: <!DOCTYPE html> <html lang=" ...

  9. [CodeForces 893D] Credit Card 贪心

    题意: Recenlty Luba有一张信用卡,一开始金额为0,每天早上可以充值任意数量的钱,但有限制,卡里的钱不能超过D.到了晚上,银行会对信用卡进行一次操作,操作有三种: 1.a[i]>0, ...

  10. pyinstaller 打包错误集锦

    最近在用 pyinstaller 打包项目的时候遇到如下错误: RecursionError: maximum recursion depth exceeded 解决方案 执行 pyinstaller ...