众所周知，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. 利用mysql的binlog恢复数据

    MySQL Binary Log也就是常说的bin-log, ,是mysql执行改动产生的二进制日志文件,其主要作用有两个: * 数据回复 * 主从数据库.用于slave端执行增删改,保持与maste ...

  2. show engine innodb status 详细介绍

    Contents Header1 SEMAPHORES. 1 LATEST DETECTED DEADLOCK. 3 TRANSACTIONS. 5 什么是purge操作... 5 FILE I/O. ...

  3. DEDECMS去除后门隐患和漏洞以及冗余代码的方法

    链接:http://jingyan.baidu.com/article/4d58d541195bdb9dd4e9c029.html 工具/原料 织梦网站管理系统 sublime编辑器 方法/步骤 第一 ...

  4. nginx重写链接

    location ~ /send.redir {             if ( $query_string ~ “url=(?<path>.+)” ) {rewrite ^.* htt ...

  5. python 统计MySQL大于100万的表

    一.需求分析 线上的MySQL服务器,最近有很多慢查询.需要统计出行数大于100万的表,进行统一优化. 需要筛选出符合条件的表,统计到excel中,格式如下: 库名 表名 行数 db1 users 1 ...

  6. 浏览器被hao123，hao524劫持的解决办法

    今天研究(翻,墙),装了几个插件,什么云帆.外遇.蓝灯 后来我的google浏览器被hao123劫持,百度浏览器被hao524劫持 删除浏览器快捷方式.属性目标里的后缀,过不多久又被劫持,把我搞毛了 ...

  7. Datagridview 中的checkbox 选中或勾选状态失效

    1.问题描述,先选中第一行,再取消选择,然后点击部门全选,第一行没有打钩,状态是不选中的状态. 2.分析代码 先选中第一行,单元格的单击事件中 改变选中状态为1,第一行取消选择,单元格的单击事件中 改 ...

  8. Visual Studio 2017各版本安装包离线下载

    关于Visual Studio 2017各版本安装包离线下载.更新和安装的方法以及通过已下载版本减少下载量的办法 微软最近发布了正式版Visual Studio 2017并公开了其下载方式,不过由于V ...

  9. Hive SQL综合案例

    一 Hive SQL练习之影评案例 案例说明 现有如此三份数据:1.users.dat 数据格式为: 2::M::56::16::70072, 共有6040条数据对应字段为:UserID BigInt ...

  10. HDU - 5136 2014icpc南京现场赛J 计数dp

    题目大意:给你一个树的直径k,要求每个点的度数不超过3, 问你有多少棵树满足条件. 思路:好难啊. 主要思想就是将一棵无根二叉树树划分成有根二叉树. 我们对k的分奇偶讨论: 我们定义dp[ i ] 为 ...