<!--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. boost准模板库scoped_ptr指针的使用以及auto_ptr智能指针的对照

    首先我们看看scoped_ptr的基本使用,包括了swap(),get(),reset()的使用,重要的提醒是作用域结束的时候会自己主动析构,无需手动的释放资源: #include<boost/ ...

  2. ACdream 1427 Nice Sequence

    主题链接:http://115.28.76.232/problem? pid=1427 Nice Sequence Time Limit: 12000/6000MS (Java/Others)Memo ...

  3. Hadoop0.20.2 Bloom filter应用演示样例

    1. 简单介绍 參见<Hadoop in Action>P102 以及 <Hadoop实战(第2版)>(陆嘉恒)P69 2. 案例 网上大部分的说明不过依照<Hadoop ...

  4. Codeforces Round #274 (Div. 2) B. Towers

    As you know, all the kids in Berland love playing with cubes. Little Petya has n towers consisting o ...

  5. debian(wheezy) chrome beta 38.0.2x.xxx Shockwave Flash was crashed 该解决方案崩溃.

    版本号chrome beta升级到38.0.2x.xxx什么时候, flash他挂了. 调试 ./libpepflashplayer.so: /lib/x86_64-linux-gnu/libc.so ...

  6. NGUI Example5 演示示例评论– lights and Refraction

     NGUI Example5 – lights and Refraction        NUI这个系统是在是牛.比unity3D里面自带的gui要好用得多.还能够为GUI加入法线贴图! 哈哈. ...

  7. Error creating bean with name &#39;com.you.user.dao.StudentDaoTest&#39;: Injection of autowired dependencies

    1.错误叙述性说明 七月 13, 2014 6:37:41 下午 org.springframework.beans.factory.xml.XmlBeanDefinitionReader loadB ...

  8. Xcode HeaderDoc 过程（1）

    原版的: http://www.raywenderlich.com/66395/documenting-in-xcode-with-headerdoc-tutorial 了解如何从代码中生成文档! X ...

  9. UML对象图和包图

    UML九已经介绍过的基本图,然后,我们再来看看对象图和包图.  一.对象图 谈到对象.我们不得不说一下对象.对象(Object)是对象类的实例(Instance),用于模型化特定的实体.对象是唯一的. ...

  10. XP下类似%windir% %userprofile% 的变量的说明(转)

    在一些批处理或者系统技巧操作教程文章中,我们常常会看到一些形如 %windir% 或者 %systemdrive% 的变量.这些变量都代表着什么含义呢?下面小技巧之家为大家整理了在Windows XP ...