解析js如何获取css样式


Posted in Javascript onDecember 11, 2016

一、获取内联样式

<div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div>
<script>
  var myDiv = document.getElementById("myDiv");

  alert(myDiv.style.width);//100px

  alert(myDiv.style['height']);//100px

  var style=myDiv.style;
  alert(style.backgroundColor);//red

  myDiv.style.backgroundColor='green';//myDiv背景色变为绿色 
</script>

在这种情况下,获取和设置样式只靠style属性就可以,因为element.style属性返回的是类似数组的一组样式属性及对应值,因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style['属性名称']”。但是,要注意的是,针对css样式里background-color;margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor.

二、因为第一种方法,即使用style属性只能获取到内联样式。但是,实际情况是文档在现在都基本遵循分离思想,样式基本都是外部链接,所以三种样式都要考虑到的,这时就要使用其他方法进行获取,而在这种情况下进行样式获取时,不同的浏览器又有不同的处理方式(主要是ie和非ie),因此根据浏览器可以分为两种方式:

(2.1)非ie浏览器中,使用document.defaultView对象的getComputedStyle(ele,null/伪类)方法,该方法接受两个参数,第一个为要考察的元素,第二个则要根据情况,如果只是考察元素本身则为null,如果要 考察伪类,则为响应的伪类。该方法获取到的为元素应用的最终样式组合,同样是类似数组的一个实例。

(2.2)在ie浏览器中,对getComputedStyle()方法不支持,但是针对每个标签元素都有一个近似于style属性的currentStyle的属性,且用法和style用法相同。只不过获取到的样式范围不一样。currenStyle获取到的和getComputedStyle()方法相接近。

为了在处理时达到兼容,可以根据这两种不同的处理方式创建一个函数来达到兼容目的,使得不管在那种浏览器中,都可以成功获取样式。如下所示:

<style type="text/css">
#myDiv {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<div id ="myDiv" style="background-color:red; border:1px solid black;"></div>
<script>
  var myDiv = document.getElementById("myDiv");
  var finalStyle = myDiv.currentStyle ? myDiv.currentStyle : document.defaultView.getComputedStyle(myDiv, null);/*利用判断是否支持currentStyle(是否为ie)
  来通过不同方法获取style*/
  alert(finalStyle.backgroundColor);  //"red"
  alert(finalStyle.width);       //"100px"
  alert(finalStyle.height);       //"200px"
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 #Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 #Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
基于JavaScript实现随机颜色输入框
Dec 10 #Javascript
BootStrap中
Dec 10 #Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 #Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 #Javascript
You might like
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python MD5加密实例详解
2017/08/02 Python
Python绘制3D图形
2018/05/03 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
中专生学习生活的自我评价分享
2013/10/27 职场文书
保安员岗位职责
2013/11/17 职场文书
十八届三中全会感言
2014/03/10 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
2014年科协工作总结
2014/12/09 职场文书
2016新年年会主持词
2015/07/06 职场文书
总经理年会致辞
2015/07/29 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Android中的Launch Mode详情
2022/06/05 Java/Android