原生js获取样式
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获取样式的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取display属性注意事项
原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
随机推荐
- Firebug在Firefox DevTools 中复活
英文:Firefox,编译:开源中国 链接:www.oschina.net/news/80230/firebug-lives-on-in-firefox-devtools 技术最前线转注:2016年1 ...
- [转]没有了SA密码,无法Windows集成身份登录,DBA怎么办?
没有了SA密码,无法Windows集成身份登录,DBA怎么办? 原文:http://www.cnblogs.com/i6first/p/3512779.html 一同事反馈SQL无法正常登录了,以前 ...
- knockout 学习实例5 style
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...
- STM32F1和STM32F4 区别
STM32F4相对于STM32F1的改进不只一点点,为了便于初学者了解,我们比对相关资料将改进点进行了汇总. STM32F1和STM32F4 区别 (安富莱整理)u F1采用Crotex M3内 ...
- Rabbitmq集群高可用测试
Rabbitmq集群高可用 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模 ...
- Perl Sort函数用法总结和使用实例
一) sort函数用法 sort LISTsort BLOCK LISTsort SUBNAME LIST sort的用法有如上3种形式.它对LIST进行排序,并返回排序后的列表.假如忽略了SUBNA ...
- FC 坦克大战 老巢铁墙
老巢外围铁墙E2A9:AC 80 EFEF80:A5 10 85 45 A5 45 AC D2 E2 用十六进制编辑器打开坦克大战的游戏文件搜索A5 45 F0 25 A5 0B改为AC 80 EF ...
- git 强制回退服务器上的commit
假设你有3个commit如下: commit 3 commit 2 commit 1 其中最后一次提交commit 3是错误的,那么可以执行: git reset --hard HEAD~1 你会 ...
- dom4j生成xml
package com.yunfengtech.solution.business; import java.io.FileOutputStream; import org.dom4j.Documen ...
- JAVA设计模式之享元模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述享元(Flyweight)模式的: Flyweight在拳击比赛中指最轻量级,即“蝇量级”或“雨量级”,这里选择使用“享元模式”的意译,是 ...