<!--DOCTYPE html-->

 <html>

 <head>

 <meta charset="utf-8" />

 <style>

 *{ text-align:center;}

 input{ margin-top:30px; padding:10px 20px;}

 #div1{ width:500px; height:300px; background:red; margin:10px auto;}

 </style>

 </head>

 <body>

 <input type="button" value="style" id="btn" />

 <div id="div1"></div>

 <script>

 //获取非行间css样式

 function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值

     if(obj.currentStyle){   //针对ie获取非行间样式

         return obj.currentStyle[attr];

     }else{

         return getComputedStyle(obj,false)[attr];   //针对非ie

     };

 };

 //为对象写入/获取css样式

 function css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式

     if(arguments.length == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式

         return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数

     }else{

         if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值

             obj.style[attr] = value;

         };

     };

 };

 window.onload = function(){

     var oDiv = document.getElementById("div1");

     var oBtn = document.getElementById("btn");

     oBtn.onclick = function(){

         alert(getStyle(oDiv,"height"));

         css(oDiv,"background","green");

         alert(css(oDiv,"width"));

     };

 };

 </script>

 </body>

 </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. SCM白色幼儿系列（十二） Proteus仿真软件简介

    Proteus软件是英国Labcenter electronics公司出版的EDA工具软件.经常使用于单片机等数字电路仿真,分为ISIS和ARES两个程序,前者用于仿真,后者用于设计PCB.我们常使用 ...

  2. Java多线程中wait, notify and notifyAll的使用

    本文为翻译文章,原文地址:http://www.journaldev.com/1037/java-thread-wait-notify-and-notifyall-example 在Java的Obje ...

  3. 82. NotesclientPrint相同的信息，以状态栏的问题

    这可能是一个小问题.但其他人也应该得到满足.在Notesclient使用LotusScript的Print当该语句是输出到状态栏,假设实际参数传递多次调用相同,状态栏将显示只有一次的信息. 例如: P ...

  4. POJ 3934 Queue(DP)

    Queue Description Linda is a teacher in ACM kindergarten. She is in charge of n kids. Because the di ...

  5. （大数据工程师学习路径）第五步 MySQL参考手册中文版----MySQL数据库管理

    一.MySQL权限管理 账户权限信息被存储在mysql数据库的user.db.host.tables_priv.columns_priv和procs_priv表中. GRANT和REVOKE语句所用的 ...

  6. 《高性能 JavaScript》读书笔记（一）

    一. 加载和执行——优化JavaScript规则: 1. 将脚本放在底部:2. 减少页面中外链脚本文件的数量: 比如,下载单个100kb的文件将比下载4个25kb的文件更快.这个可以通过离线打包工具或 ...

  7. Redis源代码分析（十一年）--- memtest内存测试

    今天,我们继续redis源代码test下测试在封装中的其它文件.今天读数memtest档,翻译了,那是,memory test 存储器测试工具..可是里面的提及了非常多东西,也给我涨了非常多见识,网上 ...

  8. Tips & Tricks：Apache log4j简明教程（二）

    在上一讲Apache log4j简明教程(一)中介绍了log4j的基本概念,配置文件,以及将日志写入文件的方法,并给出了一个详细的示例.这一讲,我在继续谈一谈如何使用log4j将日志写入MySQL数据 ...

  9. 第15章 迭代器模式（Iterator Pattern）

    原文 第15章 迭代器模式(Iterator Pattern) 迭代器模式(Iterator Pattern)    概述: 在面向对象的软件设计中,我们经常会遇到一类集合对象,这类集合对象的内部结构 ...

  10. 第13章 模版方法模式（Template Method）

    原文  第13章 模版方法模式(Template Method) 模板模式 模板模式 举例:模拟下数据库的update方法,先删除在插入. 1 2 3 4 5 6 7 8 9 10 11 12 13 ...