老生常谈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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
详解js闭包
Sep 02 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
理解javascript中的闭包
Jan 11 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php基础教程
2015/08/26 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
基于Jquery实现键盘按键监听
2014/05/11 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python 利用zmail库发送邮件
2020/09/11 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
新闻专业个人自我评价
2013/09/21 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
护理专科自荐书范文
2014/02/18 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
保护地球的宣传语
2015/07/13 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python