工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法。

  • obj.style
    js var _width = obj.style.width;
    该方法基本可以忽略,因为他只能获取到内敛样式。而现在很少会写内联样式。当然他有个好处是可读可写,所以可以据此设置元素的样式。
  • window.getComputedStyle
    js // 语法如下: window.getComputedStyle('元素','伪元素'); var _css = window.getComputedStyle(obj,null); // 不涉及伪元素的可以传null var _width = _css.getPropertyValue('width'); // _css.width
    该方法对样式可读不可写,返回一个描述元素最终样式的对象。获取某一个样式的值,可以像访问对象属性那样访问,但建议使用getPropertyValue(propertyName)方法获取(此处属性名不支持Camel-Case,所以要用类似'background-color')。可惜的是该方法在IE低版本(<IE8)是不支持的,所以IE下可以用下面的方法。
  • obj.currentStyle
    js var _css = obj.currentStyle; var _width = _css.getAttribute('width'); // _css.width
    该属性是IE自己的一个属性,也是可读不可写的。需要注意的是此处获取具体样式值的时候,getAttribute(propertyName),其中属性名必须是驼峰式命名。

原生js获取元素的样式信息的更多相关文章

  1. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  2. 原生js获取元素非行内样式属性的方法

    获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

  3. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  4. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  5. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

  6. 原生js获取元素的各种位置(大全)

    加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...

  7. 原生JS获取元素的位置与尺寸

    1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...

  8. 原生js获取元素style属性

    function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...

  9. 【封装函数】原生js 获取行内外联样式-兼容IE

    var dom=document.getElementsByTagName("div")[0]; console.log(getStyle(dom,"padding-to ...

随机推荐

  1. 设计模式之第12章-享元模式(Java实现)

    设计模式之第12章-享元模式(Java实现) “怎么回事,竟然出现了OutOfMemory的错误.鱼哥,来帮我看看啊.”“有跟踪错误原因么?是内存泄露么?”“不是内存泄露啊,具体原因不知道啊.对了,有 ...

  2. 1、IOS学习计划

    2015年12月10日 -- 2015年12月27日(一共3个周末,12个个工作日) 1.斯坦福公开课(IOS7应用开发) 一共18节课程,通过视频和demo建立感觉 2.千峰的OC课程 一共25节课 ...

  3. 强命名实用程序(SN.exe)

    不要在普通的命令行窗口中编译,请先打开C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Visual Studio 2010 ...

  4. 图说不为人知的IT传奇故事-1-计算机新生

    此系列文章为“图说不为人知的IT传奇故事”,各位大忙人可以在一分钟甚至几秒内了解把握整个内容,真可谓“大忙人的福利”呀!!希望各位IT界的朋友在钻研技术的同时,也能在文学.历史上有所把握.了解这些故事 ...

  5. python 学习分享-实战篇简单的ftp

    import socket import os import time import pickle Basedb = os.path.dirname(os.path.dirname(os.path.a ...

  6. ThinkPHP5 配置文件

    配置目录 系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应 ...

  7. (转载)CentOS 6.5使用aliyun镜像来源

    (原地址:http://www.linuxidc.com/Linux/2014-09/106675.htm) 当我们把CentOS 6.5安装好以后,可以使用这个脚本来使用国内的阿里云镜像源 #!/b ...

  8. Java注解解析-搭建自己的注解处理器(CLASS注解使用篇)

    该文章是继Java注解解析-基础+运行时注解(RUNTIME)之后,使用注解处理器处理CLASS注解的文章.通过完整的Demo例子介绍整个注解处理器的搭建流程以及注意事项,你将知道如何去搭建自己的注解 ...

  9. Python 错误类型及解决方法

    SyntaxError: invalid syntax          表示“语法错误:不正确的语法” 检查代码的缩进,代码格式是否正确,Python的缩进一般为四个空格,tab键尽量不要用. In ...

  10. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...