解析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无法执行的解决办法
Feb 25 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
javascript用函数实现对象的方法
May 14 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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数学运算
2011/12/30 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python中的元类编程入门指引
2015/04/15 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python列表如何更新值
2020/05/27 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
分层教学实施方案
2014/03/19 职场文书
给小学生的新年寄语
2014/04/04 职场文书
买卖协议书范本
2014/04/21 职场文书
政风行风建设责任书
2014/07/23 职场文书
施工单位安全责任书
2014/07/24 职场文书
妇女工作先进事迹
2014/08/17 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Golang bufio详细讲解
2022/04/21 Golang