解析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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
TS 类型兼容教程示例详解
Sep 23 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 curl 并发最佳实践代码分享
2012/09/05 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python3.6正式版新特性预览
2016/12/15 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python的信号库Blinker用法详解
2020/12/31 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
工程师岗位职责
2013/11/08 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
爱心捐助活动总结
2015/05/09 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技