我们都知道一般在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. 如何在plSql查询数据查出的数据可编辑

    最近开发项目时要经常自己造数据,遇到好多查询出数据时要进行修改.上网查询资料 总结如下: plSql允许查询数据可以编辑的条件是必须查询出rowid 在某个表上点击query data 出现的sql语 ...

  2. ACM题目————棋盘问题

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  3. ACM题目————Anagram

    Description You are to write a program that has to generate all possible words from a given set of l ...

  4. 连接无线设备——与Wi-Fi直接连接

    原文链接:http://developer.android.com/intl/zh-CN/training/connect-devices-wirelessly/wifi-direct.html 目录 ...

  5. Winform知识点

    Winform窗体常用的控件 1.按钮 Button 前缀:btn 2.文本框 TextBox 前缀:txt 3.单选按钮 RadioButton 前缀:rdo 4.复选按钮 CheckBox 前缀: ...

  6. 关于Animation动画事件的几项测试

    测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...

  7. JAVA基础知识之Map集合

    Map的内部结构Entry Set与Map的关系 Map的内部类Entry Map的通用方法及Map的简单用法 HashMap和HashTable的区别 HashMap和HashTable判断元素相等 ...

  8. C#实现中国天气网XML接口测试

    点击链接查看中国天气网接口说明,最近想研究一下接口测试,源于最近一次和某公司的技术总监(交大校友)谈话,发现接口测试的需求是比较大的,于是想要研究一下. 好不容易在网上找到了一个关于中国天气网的接口说 ...

  9. linux学习建议

    给初学者的建议 注意事项: 1 严格区分大小写,包括命令和文件夹,windows和linux的系统不太一样 2 所有内容都是以文件保存,包括硬件,文件要永久生效,都要写入文件,所以文件命令很重要 3 ...

  10. CentOS 安装ftp

    Linux安装ftp组件 1 安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@bogon ~]# yum -y insta ...