众所周知，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. Android 抽屉导航

    原文地址 http://developer.android.com/training/implementing-navigation/nav-drawer.html 创建抽屉导航 导航抽屉是在 屏幕左 ...

  2. 删除git库中untracked files（未监控）的文件

    https://blog.csdn.net/ronnyjiang/article/details/53507306 在编译git库拉下来的代码时,往往会产生一些中间文件,这些文件我们根本不需要,尤其是 ...

  3. 字符串匹配算法之 kmp算法 （python版）

    字符串匹配算法之 kmp算法 (python版) 1.什么是KMP算法 KMP是三位大牛:D.E.Knuth.J.H.MorriT和V.R.Pratt同时发现的.其中第一位就是<计算机程序设计艺 ...

  4. 湖南联通发福利了C#为你月赚150M流量回家过年不再愁

    回家过年没流量怎么能行,这里教大家一个月赚150流量的方法,哈哈,首先下载联通客户端,本人只有android手机一台,没办法只能用 android的了,里面有一个悦分享,上几张图,图有有我赚的流量. ...

  5. Django实战（12）：增加目录页，设定统一布局

    针对上一节的新需求,界面设计师还为我们设计了一个新的界面,不仅仅是目录页,还包含了站点的整体风格,如下图: 感谢界面设计师为我们提供的“又黑又硬”的工具条,这个看起来真的很酷.下面,让我们来享用她的工 ...

  6. Cygwin镜像使用

    前言:Cygwin是一个在windows平台上运行的类UNIX模拟环境,可以自己安装想用的插件 Cygwin镜像使用帮助 收录架构 x86 x86_64 收录版本 所有版本 更新时间 每12小时更新一 ...

  7. 把对象转换成JSON形式的html代码

    function formatJson(msg) { var rep = "~"; var jsonStr = JSON.stringify(msg, null, rep) var ...

  8. 命令：which、whereis、who和w

    开始 命令搜索的顺序 在shell function中查找,有则调用,无则下一步: 判断命令是否为bash内置命令,有则调用,无则下一步: 在$PATH中搜索该命令,有则调用,无则报错. 判断命令类型 ...

  9. 关于php上传文件过大的表单回填

    也许标题有点绕口,有点无法让人理解.请原谅博主,语文学的不好,都赖体育老师. 问题场景重现:在某次迭代中,接到这样一个需求:当新建或编辑一个Bug(包含附件以及其他字段)上传附件过大时,退回到编辑页面 ...

  10. Jquery API学习笔记

    学习网站 JQuery API 中文网: http://www.jquery123.com/ 学习一遍API可以更熟练的运用jquery并且拓展思路. 这里只挑选了一些我认为在开发中会用到的一些API ...