js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。

1、ie

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #box{
  8.             width:200px;
  9.             height:200px;
  10.             background: skyblue;
  11.         }
  12.     </style>
  13.     <script>
  14.         window.onload=function(){
  15.             var box=document.getElementById("box");
  16.             alert(box.currentStyle["width"]);       //200px
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21.     <div id="box"></div>
  22. </body>
  23. </html>

2、其他浏览器

  1. alert(getComputedStyle(box,false)["width"]);        //200px

3、兼容

  1. <script>
  2.         function getStyle(obj,attr){
  3.             if(obj.currentStyle){
  4.                 return obj.currentStyle[attr];
  5.             }else{
  6.                 return getComputedStyle(obj,false)[attr];
  7.             }
  8.         }
  9.  
  10.         window.onload=function(){
  11.             var box=document.getElementById("box");
  12.             alert(getStyle(box,"width"));    //兼容ie及其他浏览器
  13.         }
  14.     </script>

4、获取及设置非行间样式

  1. <script>
  2.         function getStyle(obj,attr,value){
  3.             if(arguments.length==2){         //根据参数个数执行相应操作
  4.                 if(obj.currentStyle){
  5.                     return obj.currentStyle[attr];
  6.                 }else{
  7.                     return getComputedStyle(obj,false)[attr];
  8.                 }
  9.             }else{
  10.                 obj.style[attr]=value;         //这里需要注意，使用obj.style.attr无效
  11.             }
  12.  
  13.         }
  14.  
  15.         window.onload=function(){
  16.             var box=document.getElementById("box");
  17.             getStyle(box,"backgroundColor","yellowgreen");          //把盒子的背景颜色设置成黄绿色
  18.             alert(getStyle(box,"width"));      //弹出盒子的宽度200px
  19.         }
  20.     </script>

原生js提取非行间样式的更多相关文章

  1. JS获取非行间样式

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

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

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

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

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

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

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

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

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

  6. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  7. JS取非行间样式

    <title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...

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

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

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

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

随机推荐

  1. scrapy--ipproxy

    不要急于求成,你只要做的是比昨天的你更优秀一点 --匿名 今天给大家讲一下--IpProxy,由于从"http://www.xicidaili.com/nn"爬取,以下是我转载的博 ...

  2. dts--framework(一)

    dts 大体框架 framework 定义类 定义方法 tests framework调用所需要的函数 ./dpdk/usertools/cpu_layout.py /sys/devices/syst ...

  3. JDK5 新特性

     JDK5新特性目录导航: 自动拆装箱 Foreach 静态导入 可变参数 Var args 枚举 格式化输出 泛型 ProcessBuilder 内省 线程并发库(JUC) 监控和管理虚拟机 元数据 ...

  4. [C#]常用开源项目

    [转][C#]常用开源项目 本文来自:http://www.cnblogs.com/sunxuchu/p/6047589.html Json.NET http://www.newtonsoft.com ...

  5. git重新下载项目

    file-new-project from version control - git 修改网址为需要的网址

  6. zeppelin的数据集的优化

    前面我们介绍了zeppelin的修改,前面由于自己的原因,对zeppelin的修改过于多,现在由于优化了,我们两个类, 一个是zeppelin-server的NotebookServer的类的broa ...

  7. Installation error: INSTALL_FAILED_CANCELLED_BY_USER

    我的手机本来是支持Androidstadio 调试手机的,我手机小米的,后来,系统升级了,我也没在意,第二天上班,已运行就报错: Installation error: INSTALL_FAILED_ ...

  8. 缓存（CDN缓存，浏览器（客户端）缓存）

    1.什么是缓存? 缓存是一种数据结构,用于快速查找以及执行的操作结果.因此,如果一个操作执行起来很慢,对于常用的输入数据就可以将操作的结果缓存,并在下次调用该操作时使用缓存的数据. 缓存是一个到处都存 ...

  9. TCP重组问题

    今天问题: vqmon 测试一pcap抓包文件18.pcap.发现实际输出的视频分片信息和抓包不符合. ===>pts : 00:00:33 Too much data in TCP recei ...

  10. 《Cracking the Coding Interview》——第12章：测试——题目2

    2014-04-24 23:15 题目:你有一段程序,运行了十次每次都在不同的地方崩掉了.已知这段程序只用了标准C或C++库函数,请问有什么思路来找出问题所在. 解法:1. 时间戳每次都不同.2. 随 ...