老生常谈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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript时间函数大全
2014/06/30 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
python类继承用法实例分析
2014/10/10 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
如何选择使用结构还是类
2014/05/30 面试题
Linux常见面试题
2016/10/04 面试题
理想点亮人生演讲稿
2014/05/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
安徽导游词
2015/02/12 职场文书
何玥事迹观后感
2015/06/16 职场文书
礼貌问候语大全
2015/11/10 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android