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. 如何理解andriod中的View和framelayout两个概念

    View 和 FrameLayout 是包含关系,FrameLayout 继承自ViewGroup,然后继承自View. FrameLayout是一种 ViewGroup,可以在里面放其它的View, ...

  2. Windows环境下使用Redis缓存工具的图文详细方法

    一.简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合). ...

  3. [solr] - Facet

    Solr facet使用于分类统计,是最好的工具.下面例子使用facet将可模拟查询搜索出租房信息. 1.在schema.xml中的内容如下: <?xml version="1.0&q ...

  4. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  5. rsync+sersync实现文件实时同步

    前言: 一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增 ...

  6. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  7. 两个二进制数多少个位(bit)不同

    class Solution { public: /** * 获得两个整形二进制表达位数不同的数量 * * @param m 整数m * @param n 整数n * @return 整型 */ in ...

  8. List集合中的对象根据属性排序

    集合类List存放的数据,默认是按照放入时的顺序存放的,比如依次放入A.B.C,则取得时候,则也是A.B.C的顺序,实际场景中,有时我们需要根据自定义的规则对List中的元素进行排序,该如何实现呢?看 ...

  9. Haproxy+asp.net +RedisSessionStateProvider 完美实现负载均衡,并且session保持

    .net framework 4.5下测试成功,使用RedisSessionStateProvider 2.2.1保持session数据,通过Haproxy保持会话数据.首先在PM下安装RedisSe ...

  10. 53. Minimum Window Substring

    Minimum Window Substring Given a string S and a string T, find the minimum window in S which will co ...