1.  <!--DOCTYPE html-->
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8" />
  5.  <style>
  6.  *{ text-align:center;}
  7.  input{ margin-top:30px; padding:10px 20px;}
  8.  #div1{ width:500px; height:300px; background:red; margin:10px auto;}
  9.  </style>
  10.  </head>
  11.  <body>
  12.  <input type="button" value="style" id="btn" />
  13.  <div id="div1"></div>
  14.  
  15.  <script>
  16.  //获取非行间css样式
  17.  function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
  18.      if(obj.currentStyle){   //针对ie获取非行间样式
  19.          return obj.currentStyle[attr];
  20.      }else{
  21.          return getComputedStyle(obj,false)[attr];   //针对非ie
  22.      };
  23.  };
  24.  //为对象写入/获取css样式
  25.  function css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
  26.      if(arguments.length == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式
  27.          return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数
  28.      }else{
  29.          if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值
  30.              obj.style[attr] = value;
  31.          };
  32.      };
  33.  };
  34.  window.onload = function(){
  35.      var oDiv = document.getElementById("div1");
  36.      var oBtn = document.getElementById("btn");
  37.      oBtn.onclick = function(){
  38.          alert(getStyle(oDiv,"height"));
  39.          css(oDiv,"background","green");
  40.          alert(css(oDiv,"width"));
  41.      };
  42.  };
  43.  </script>
  44.  </body>
  45.  </html>

js获取非行间样式或定义样式的更多相关文章

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

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

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

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

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

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

  4. JS获取非行间样式

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

  5. js 获取非行间样式

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

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

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

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

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

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

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

  9. 原生js提取非行间样式

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

随机推荐

  1. Centos使用dd命令制作U盘启动盘 wodim刻录光盘

    首先格式化U盘:使用fdisk -l 查看U盘到挂载点,如我的为/dev/sdb1.卸载U盘,运行格式化命令:mkfs.vfat  /dev/sdb1 然后又一次挂载U盘,開始制作启动盘: # dd ...

  2. log4cpp日志不能是溶液子体积

     我们的项目用途log4cpp由于日志输出模块,但在使用中发现,假设Services,或者是在Windows Server版本号.不会有一个正常的日志切削现象.该日志已被写入到文件中,持续,即使超 ...

  3. 通达OA web页面与精灵显示内容更新后不一致的问题

    前一段就发现有这种问题.就是在开发的电话查询里更新的信息,可是在精灵对话窗体上显示的还是原来的信息.这样导致从新开发入口更新信息就不能使用.一開始还以为是厂家升级,变更了存储的表结构.感觉下载近期的升 ...

  4. 记录我第一次在Android开发图像处理算法的经历

    大概是四月底的时候.有人加我QQ问我是否做能做一些基于图像皮肤检測的算法, 主要是实现对皮肤六项指标: 1.      水分 2.      有份 3.      痤疮与痘痘 4.      色斑与肤 ...

  5. Intent常用使用汇总

    方法一:调用默认的短信程序Intent intent = new Intent(Intent.ACTION_VIEW);intent.setType("vnd.android-dir/mms ...

  6. Android 学习历程摘要（一）

    初学Android,可能有些地方可能理解不正确,假设有朋友看到的话麻烦指正我一下,万分感谢. 1. 善用API DEMO,刚開始学习的人的需求基本在里面都能够满足,Eclipse导入API Demop ...

  7. C# .net基于Http实现web server(web服务)

    原文:C# .net基于Http实现web server(web服务) 什么是 web server?  百度百科是这么解释的: Web Server中文名称叫网页服务器或web服务器.WEB服务器也 ...

  8. SettingsProvider 它SettingsCache

    转载请注明出处:http://blog.csdn.net/droyon/article/details/35558437 SettingsCache,如指出,SettingsProvider缓冲.这将 ...

  9. 图片 Base64码 转换

    import sun.misc.BASE64Decoder; private String getBase64Picture(String imgBase64Str) { FileOutputStre ...

  10. NSOJ Constructing Roads(图论)

    There are N villages, which are numbered from 1 to N, and you should build some roads such that ever ...