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. 读文档readarx.chm

    readarx.chm <Tips and Techniques> Incremented AutoCAD Registry Number Ideally, a change of reg ...

  2. 【java】 linux下利用nohup后台运行jar文件包程序

    Linux 运行jar包命令如下: 方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 ...

  3. Silverlight管理系统源码(用于开发ERP、OA、CRM、HR、进销存、财务等系统之用)

    Silverlight大型管理系统源代码(支持创建ERP.OA.CRM.HR.进销存.财务等系统之用) 可用于开发以下系统 SilverlightERP SilverlightCRM Silverli ...

  4. yii2安装

    https://github.com/settings/tokens  设置token 在安装的时候 要复制进去 复制到安装命令中去

  5. case when完成不同条件的显示

    好长时间不写sql了,今天群里问了一个问题: 我想得到的就是  2,3,4,就是低,5,6,7,8,9就是中,10,11....就是高,现在只知道zpcs,怎么得到高中低? case 写的,decod ...

  6. Linux查看系统资源使用情况(转)

    概述: 用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O ...

  7. js传递参数中包含+号时的处理方法

    encodeURI(url).replace(/\+/g, '%2B') 例子: $scope.getAnesthesiawaystatistical = function (annual, anes ...

  8. work flow

  9. DataTable与DataSet

    转自:http://www.cnblogs.com/rjf1979/archive/2010/09/09/1822667.html DataSet包含很多个DataTable 一张表的时候用DataT ...

  10. 52. Sort Colors && Combinations

    Sort Colors Given an array with n objects colored red, white or blue, sort them so that objects of t ...