解析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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
ES6的解构赋值实例详解
May 06 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 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中将网页导出为Word文档的代码
2012/05/25 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python创建xml文件示例
2017/03/22 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python中的流程控制详解
2021/02/18 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
超市中秋节促销方案
2014/03/21 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
民事诉讼代理词
2015/05/25 职场文书
运动会加油稿50字
2015/07/21 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android