老生常谈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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
Angular 路由route实例代码
Jul 12 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
layui实现三级导航菜单
Jul 26 Javascript
JavaScript实现tab栏切换效果
Mar 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP闭包实例解析
2014/09/08 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
jquery validate demo 基础
2015/10/29 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python3 shelve模块的详解
2017/07/08 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
学生宿舍管理制度
2014/01/30 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
设计专业自荐信
2014/06/19 职场文书
警告通知
2015/04/25 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python