我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的，但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.attr获取就是一个空字符。

今天我们来介绍下要获取节点计算后的样式就是不一定写在行间样式的方法。

1：window.getComputedStyle(obj,false)['attr']方法

这是BOM（浏览器window对象）提供的方法 ，所以可以直接写成getComputedStyle(nodeObj,false)，省略前面的window对象,该方法有两个参数，第一个是要获取样式的节点对象；第二个可以写成任何的字符一般写成false或者null，这里最好是用false因为用null
IE9+会有问题；后面直接跟要获取的样式（写在方括号中）即可。这个方法的返回值为一个对象，为计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 var style=getComputedStyle(div,false)['width']; alert(style);

但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法

2：nodeObj.currentStyle['attr'];

node.currentStyle，该属性返回的也是是一个对象，也是计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成

var
style=div.currentStyle['width']; alert(style);

3:为了兼容性我们可以将其封装为一个函数，提供一个统一的获取计算后的样式方法如下：

html:

<body>

<div style="width:500px"></div>

</body>

css:

<style type="text/css"> 

     body,*{margin: 0;padding: 0;}

     div{width: 300px;height: 300px;background: blue;border: 10px  solid #000;}

     </style>

js:

<script
type="text/javascript">

window.onload=function(){

      var div=document.getElementsByTagName("div")[0];

      var style=getAttr(div,'width')

      alert(style);   

}

function getAttr(obj,attr){  //我们把它们封装为一个函数，注意了在全局下定义的函数的都会默认设置为window对象的方法，所以以后我们调用方法的时候就可以直接用然后省略前面的对象，当然了你这样var style=window.getAttr(div,'width');调用也是木有问题的。

  var style;

     if(obj.currentStyle){   //当有这个属性的时候currentStyle

style=obj.currentStyle[attr]; //兼容IE 我测试的是ie5+

     }

     else{

style=getComputedStyle(obj,false)[attr]; //主流浏览器

     }

     return style;

}



</script>

效果

javascript中获取非行间样式的方法的更多相关文章

  1. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  2. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  3. 获取非行间样式getComputedStyle

    有如下代码: 1 2 3 div {     width: 200px; } 1 2 3 <div id="aa" style="height: 100px;&qu ...

  4. js兼容总结之获取非行间样式

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...

  5. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  6. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  8. js获取非行间样式/写入样式（行间）

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  9. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

随机推荐

  1. Docker 端口映射问题解决

    在操作Docker容器时发现了其一个端口映射的BUG,具体表现为:开启容器时做了端口映射80:8080,即宿主机的80端口映射到容器内部的8080Jboss端口.一开始测试也没有什么问题,都可以联通, ...

  2. HDU 5934：Bomb（强连通缩点）

    http://acm.hdu.edu.cn/showproblem.php?pid=5934 题意:有N个炸弹,每个炸弹有一个坐标,一个爆炸范围和一个爆炸花费,如果一个炸弹的爆炸范围内有另外的炸弹,那 ...

  3. APP运营推广那点事【干货】

    你的手机里面有多少应用?什么样的手机应用吸引你?下载之后经常用还是让他shi在那里?又或者刚点进去就卸载? 一款成功的应用,开发APP只是第一步,比前者更重要的是“养”APP,APP就像是一个需要不断 ...

  4. JavaScript DOM 编程艺术（第2版）读书笔记 (7)

    动态创建标记 一些传统方法 document.write document.write()方法可以方便快捷的把字符串插入到文档里. 请把以下标记代码保存为一个文件,文件名就用test.html 好了. ...

  5. linux下使用tar命令（转）

    转至: http://www.cnblogs.com/li-hao/archive/2011/10/03/2198480.html 解压语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主 ...

  6. 线程池原理及创建（C++实现）

    http://www.cnblogs.com/lidabo/p/3328402.html 本文给出了一个通用的线程池框架,该框架将与线程执行相关的任务进行了高层次的抽象,使之与具体的执行任务无关.另外 ...

  7. linux之eventfd()

    参考:http://www.man7.org/linux/man-pages/man2/eventfd.2.html 一.简介 简单来说,这个函数就是创建一个用于事件通知的文件描述符.它类似于pipe ...

  8. Web应用程序状态管理(上)

    一:概述Http协议使用的是无状态连接:客户浏览器与服务器建立连接-发出请求-得到 响应-关闭连接.话句话说,连接只针对一个请求/响应.由于连接不会持久保留 所以容器认不出做第二个请求的客户与做前一个 ...

  9. php获取本周和上周的开始日期和结束日期

    <?php header('Content-type: text/html; charset=utf-8'); $date=date('Y-m-d'); //当前日期 $first=1; //$ ...

  10. linux硬盘分区格式化及挂载

    1.硬盘的接口类型 硬盘的接口一般分为两种,一种是IDE并行接口,一种是SATA串行接口, 在linux上面IDE接口的硬盘被识别为/dev/hd[a-z]这样的设备,其中hdc表示光驱设备,这是因为 ...