众所周知，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. 1->小规模集群架构规划

    "配置无人值守批量安装系统(Cobbler)" "搭建PPTP VPN/ NTP/Firewalld内部共享上网 " "搭建跳板机服务jumpserv ...

  2. Java数据类型以及变量的定义

    1130136248   Java的基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类 ...

  3. 缓存数据库-redis数据类型和操作（hash)

    一:Redis 哈希(Hash) Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 ...

  4. Python学习笔记：个税起征点上调至5000，算一算少交多少税？

    一.旧税率表与新税率表比较 以前起征点是3500,2018年10月1日起起征点正式修改为5000,下面我们用Python来分别计算新旧个人所得税分别为多少? 二.旧的个人所得税 import sys ...

  5. CentOS7.5安装cairo-dock，比mac托盘还美

    1.下载安装nux-desktop 到http://li.nux.ro/download/nux/dextop/el7/x86_64/找到nux-dextop-release-xxxx.nux.noa ...

  6. Codeforces Round #323 (Div. 2) E - Superior Periodic Subarrays

    E - Superior Periodic Subarrays 好难的一题啊... 这个博客讲的很好,搬运一下. https://blog.csdn.net/thy_asdf/article/deta ...

  7. HTML5 Canvas游戏开发（二）高级功能

    一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移 ...

  8. 查看当前session权限

    oracle 1111.2.0.1.0 环境 查看connect都有什么权限 SQL> select * from dba_sys_privs where GRANTEE='CONNECT'; ...

  9. poj1182 食物链（带权并查集）

    题目链接 http://poj.org/problem?id=1182 思路 前面做的带权并查集的权值记录该结点与其父结点是否是同一类,只有两种取值情况(0,1),在这题中某结点a和其父结点b的取值共 ...

  10. PHP版本--HTTP session cookie原理及应用

    PHP 的COOKIE cookie 是一种在远程浏览器端储存数据并以此来跟踪和识别用户的机制.     PHP在http 协议的头信息里发送cookie,因此  setcookie()函数必须在其它 ...