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. 解决php的“It is not safe to rely on the system’s timezone settings”问题

    PHP调试的时候出现了警告: It is not safe to rely on the system解决方法,其实就是时区设置不正确造成的,本文提供了3种方法来解决这个问题. 实 际上,从PHP 5 ...

  2. visual.studio.15.preview5 编译器

    前段时间微软更新了新版开发工具visual studio 15 preview5,安装后连文件结构目录都变了,想提取编译器还找不到. 不是原来的VC\BIN目录,已迁移到IDE\MSVC\14.10. ...

  3. C#微信公众号开发-MVC模式公共类封装

    第一部分:基础配置 第一步:注册微信公众账号 如果开发测试阶段可以打开测试链接地址,注册测试公众号.测试账号除了不能与正式账号通信外其他什么高级接口的都可以实现. 测试号管理地址:http://mp. ...

  4. 学习SQL的点点滴滴(一)-常用函数

    该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很详细. 以下所有例子均Studnet表为例 ...

  5. Java集合---LinkedList源码解析

    一.源码解析1. LinkedList类定义2.LinkedList数据结构原理3.私有属性4.构造方法5.元素添加add()及原理6.删除数据remove()7.数据获取get()8.数据复制clo ...

  6. 【解决】SharePoint集成模式下Reporting Service—为用户授予的权限不足,无法执行此操作。 (rsAccessDenied)

    环境:Windows Server 2008 R2 SP1,SharePoint 2010 企业版,SQL Server 2008 R2 Reporting Service(SharePoint集成模 ...

  7. vs无法调试的时候

    ①选中所有程序可能经过的地方设置断点 ②清空.net frameword对应的缓存,路径"C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temp ...

  8. MVC 项目中为什么会有两个web.config

    我们对MVC 并不陌生, 在创建MVC项目时,总会发现,在工程目录 中有两个 web.config 文件,一个是在工程的根目录下,一是在 views 下,两个web.config 中的内容也不尽相同, ...

  9. nginx 安装及代理配置。

    新建etc/yum.repos.d/nginx.repo文件,添加以下内容:[nginx] name=nginx repo baseurl=http://nginx.org/packages/cent ...

  10. CSS基础篇

    写的不错,收藏 http://www.cnblogs.com/suoning/p/5625582.html