js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数。

函数如下:

function getStyle(element, property) {
var value = element.style[property];
if(!value){
     if(window.getComputedStyle) { //非IE
       value = window.getComputedStyle(element,null)[property];
     } else if(element.currentStyle) { //IE
       value = element.currentStyle[camelize(property)];
      }
}
return value;
}

下面将分析下设置样式的几种方法:

  • 1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在和通�%8�加载进来的样式属性
  • 2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值(高级属性)。
  • 3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的属性等)。

原生js获取样式的更多相关文章

  1. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  2. 原生js获取display属性注意事项

    原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  5. 原生js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  6. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  7. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  8. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  9. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

随机推荐

  1. UML的类图、时序图表示方法以及惯例

    <UML类图图示样例>说明:http://wenku.baidu.com/link?url=DEaRFyVIAH4kZ7TolplfFhFhmAk3gFaNSOH7XPzfTnCWY4CB ...

  2. 主从Reactor多线程模型

    Reactor 单线程--多线程--主从多线程

  3. 伯克利包过滤(Berkeley Packet Filter,BPF)语言

    libpcap支持一种功能非常强大的过滤语言——“伯克利包过滤”语法.使用BPF过滤规则,你可以确定该获取和检查哪些流量,忽略哪些流量.BPF让你能够通过比较第2.3.4层协议中各个数据字段值的方法对 ...

  4. [IIS]IIS扫盲(八)

    iis - IIS之FTP服务器 一.建立你的FTP站点  第一个FTP站点(即“默认FTP站点”)的设置方法和更多FTP站点的建立方法请参照前文Web服务器中相关操作执行.需要注意的是,如果你要用一 ...

  5. 解决:新版火狐浏览器3d打不开

    重启:按 Ctrl + Shift + L 键唤出 3d 视图 参考文档:http://tieba.baidu.com/p/4606488108

  6. java中数据类型转换

    1.自动类型转换:首先两者数据类型要兼容,且目标类型要大于源类型如(int类型转换成double类型) 2.强制转换:两者数据类型要兼容,会使破坏数据的结构

  7. C++——CString用法大全

    列表形式的如下: CString的构造函数CString( );例:CString csStr; CString( const CString& stringSrc );例:CString c ...

  8. 三层VS控制器

    三层中的Model 是数据模型 与数据库字段一一对应而mvc中的model是 显示模型,指在页面的显示字段的列一一对应,不一定在数据库中有这样的一个表,如当页 面上要显示多个表的综合信息时. 当在Co ...

  9. C++ 二叉树深度优先遍历和广度优先遍历

    二叉树的创建代码==>C++ 创建和遍历二叉树 深度优先遍历:是沿着树的深度遍历树的节点,尽可能深的搜索树的分支. //深度优先遍历二叉树void depthFirstSearch(Tree r ...

  10. Android Service 文档

    应用场景: 1  用于将后台逻辑(Service中)和UI逻辑(Activity中)进行解耦,实现Service功能的复用,为其他程序提供功能. 2  后台功能,由于Activity在进入后台时(On ...