众所周知，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. 目标板通过nfs挂载根文件系统

    目标板挂载根文件系统的方法有两种(这里所说的服务端就是ubuntu,Ubuntu已经成功安装了nfs服务,并且保证服务端与目标板ping 通) 第一种:等待开发板启动之后去挂载,此时文件系统从Flas ...

  2. git忽略特殊文件或文件夹

    1.在项目目录中添加“.gitignore”文件,项目目录就是你存放git工程的目录就是有“.git”目录的目录 vi .gitignore 2.在文件中添加如下内容,其中“/runtime/”是忽略 ...

  3. java基础46 IO流技术（输出字符流/缓冲输出字符流）

    一.输出字符流 1.1.输出字符流体系 --------| Writer:输出字符流的基类(抽象类)  ----------| FileWriter:向文件输出数据输出字符流(把程序中的数据写到硬盘中 ...

  4. Laravel 程序架构设计思路：使用动作类

    当我们谈论到应用程序的架构的时候,经常会问到一个经典的问题,那就是"这段代码应该放在哪里比较好". 因为 Laravel 是一个相当灵活的框架,所以要回答这个问题其实没那么容易.我 ...

  5. （三）Jsoup 使用选择器语法查找 DOM 元素

    第一节: Jsoup 使用选择器语法查找 DOM 元素 Jsoup使用选择器语法查找DOM元素 我们前面通过标签名,Id,Class样式等来搜索DOM,这些是不能满足实际开发需求的, 很多时候我们需要 ...

  6. C#socket编程序（二）

    在上一篇中,我列了一些常用的方法,可以说这些方法是一些辅助性的方法,对于分析网络中的主机属性非常有用.在这篇中,我将会介绍一下面向连接(TCP)socket编程,其中辅以实例,代码可供下载. 对于TC ...

  7. 一步一步学习IdentityServer3 (6)

    上一个章节提到了数据持久化 下面说一说自定义登录界面,Idr3提供了很多服务接口,其中一个就是 ViewService,我们只需要去注册 IViewService 这个接口的实现 提供了一个泛型视图服 ...

  8. Java学习（异常类）

    一.什么是异常: 异常就是在运行时产生的问题.通常用Exception描述. 在java中,把异常封装成了一个类,当出现问题时,就会创建异常类对象并抛出异常相关的信息(如详细信息,名称以及异常所处的位 ...

  9. day9作业

    题目:简单主机批量管理工具 需求: 1.主机分组: 2.登录后显示主机分组,选择分组后查看主机列表: 3.可批量执行命令.发送文件,结果实时返回: 4.主机用户名密码可以不同.

  10. WangSql 3.0源码共享(WangSql 1.0重大升级到3.0)

    WangSql 1.0博文阅读: http://www.cnblogs.com/deeround/p/6204610.html 基于1.0做了以下重大改动: 1.多数据实现方式调整 2.使用EmitM ...