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. 优秀IT技术文章集(最新)(高质量)

    作者:赵磊 博客:http://elf8848.iteye.com 阅读优秀的文章可以使你快速进步,本文收集了广受好评的优秀IT技术文章,在你有空时读一读,安静下来思考一下. 不断更新中... --- ...

  2. CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin:3.1 or one of its dependencies could not be resolved

    CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin ...

  3. 黄聪:MySQL 按指定字段自定义列表排序

    问题描述 大家都知道, MySQL 中按某字段升序排列的 SQL 为 (以 id 为例, 下同): SELECT * FROM `MyTable` , , , ) ORDER BY `id` ASC ...

  4. [Linux] Linux下谁在消耗我们的cache

    一.缘由: 曾经看到MySQL服务器上Cache占用特别大,其实大家都知道这是合理的,这些都是可用内存: 那么问题来了,是谁在占用这些Cache呢?如果去掉不合理的Cache占用,系统内存会更充分的得 ...

  5. CRM 403错误

    1 IIS 正常 2 CRM 各项服务正常. 3  应该程序池--CRMAppPool 停止

  6. tomcat下的https项目创建与部署

    1.1 生成keystore文件及导出证书 步奏1:打开控制台,运行: %JAVA_HOME%\bin\keytool -genkey -alias tomcat -keyalg RSA (如果你已经 ...

  7. SQL SERVER安装序列号

    MICROSOFT SQL SERVER 2012 DEVELOPER 版 序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68Y MICROSOFT SQL SERVER 2012 EN ...

  8. Linux zip/unzip命令

    From: http://www.ixdba.net/a/os/linux/2010/0725/359.html From: http://www.cnblogs.com/chinareny2k/ar ...

  9. Linux下编译带x264的ffmpeg的配置方法,包含SDL2

    一.环境准备 ffmpeg下载:http://www.ffmpeg.org/download.html x264下载:http://download.videolan.org/x264/snapsho ...

  10. 移动端UC浏览器和QQ浏览器的部分私有meta属性

    UC浏览器 1.设置屏幕横屏还是竖屏 <meta name="screen-orientation" content="portrait | landscape&q ...