老生常谈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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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验证session无效的解决方法
2014/11/04 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JS继承 笔记
2011/07/13 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
原生js实现滑块区间组件
2021/01/20 Javascript
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python实现在线翻译
2020/06/18 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
年度评优评先方案
2014/06/03 职场文书
加油口号大全
2014/06/13 职场文书
张丽莉观后感
2015/06/16 职场文书
python基于turtle绘制几何图形
2021/06/15 Python