老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)


Posted in Javascript onSeptember 19, 2018

众所周知,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>

运行:

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

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

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

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

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

IE运行结果:

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

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

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

火狐运行结果:

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

 二者兼容定法:

老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

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

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

总结

以上所述是小编给大家介绍的老生常谈JavaScript获取CSS样式的方法(兼容各浏览器),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 #Javascript
Vue瀑布流插件的使用示例
Sep 19 #Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 #Javascript
解决vuecli3.0热更新失效的问题
Sep 19 #Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 #Javascript
解决vue热替换失效的根本原因
Sep 19 #Javascript
三种Webpack打包方式(小结)
Sep 19 #Javascript
You might like
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
农村婚礼证婚词
2014/01/08 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
四下基层实施方案
2014/03/28 职场文书
大一新生学期自我评价
2014/04/09 职场文书
企业安全生产标语
2014/06/06 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
保护环境的宣传语
2015/07/13 职场文书
学术会议开幕词
2016/03/03 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android