原生javascript获取元素样式属性值的方法

所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取.
elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值.
而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象的getPropertyValue获取属性值.
上述两种方法, 无论IE还是W3C的, 有一点是相同的, 它们所获取的是元素Css属性最终值. 这一点与Css的优先级是相同的.
有一点不同的是, IE的方法是通过Css属性的驼峰式名(如textAlign)获取, 而W3C的方法是通过元素Css原来的属性名(如text-align)获取的, 所以, 在使用W3C方法时, 需要对Css属性名做个简单的处理.
基于此, 我们可以封装一个获取元素属性值的方法, 如下:


代码如下:

function attrStyle(elem,attr){
if(elem.attr){
//若样式存在于html中,优先获取
return elem.style[attr];
}else if(elem.currentStyle){
//IE下获取CSS属性最终样式(同于CSS优先级)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
//W3C标准方法获取CSS属性最终样式(同于CSS优先级)
//注意,此法属性原格式(text-align)获取的,故要转换一下
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
//获取样式对象并获取属性值
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
}else{
return null;
}
}

记得精通JavaScript一书中获取元素位置那一节(忘了是第6还是第7章), 有获取元素样式属性值更详细的解释. 第一次知道document.defaultVies.getComputedStyle就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看.
原方发布于Mr.Think的博客: http://mrthink.net/js-get-cssproperty/

赞 (0)

相关推荐

  • 利用原生JavaScript获取元素样式只是获取而已

    ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color; //获取颜色 2.wi

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • JS如何设置元素样式的方法示例

    JS如何设置元素样式的方法示例

    一看到这个标题,大家可能首先想到的就是使用"[元素].style.[CSS属性名] = [属性值]"这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择. 接下来,我将详细介绍三种设置元素样式的方式. 一.style 这个其实就是我们所熟知的方式,举个例子~~ <div id="box"></div> var box = document.getElementById("box"); box.style.wid

  • 原生javascript获取元素样式

    摘要:     我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style     在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获

  • javascript克隆元素样式的实现代码

    复制代码 代码如下: /** * 克隆元素样式 * @param {HTMLElement} 被克隆的元素 * @param {Boolean} 是否启用缓存(默认true) * @return {String} css类名 */ var cloneStyle = (function (doc) { var rstyle = /^(number|string)$/, cloneName = '${cloneName}', sData = {}, addHeadStyle = function (

  • js正确获取元素样式详解

    在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM

  • javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • JavaScript修改css样式style动态改变元素样式

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

  • 原生javascript获取元素样式属性值的方法

    所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

  • JavaScript获取select中text值的方法

    本文实例讲述了JavaScript获取select中text值的方法.分享给大家供大家参考,具体如下: 别的不说,先看代码: 方法一: <select name="parent_id" onchange="setTitleAndLinkByGoodsCategory(this.value,this.options[this.selectedIndex].text);" > <option value="0">请选择商品分类

  • 使用vue点击li,获取当前点击li父辈元素的属性值方法

    vue实现加载并展示后台数据的tab选项卡 vue用于渲染页面 jquery用于方法实现动态效果 <div class="content"> <!-- change方法, 数值改变触发 --> <select v-on:change="getData()" name="" id="dataSelect"> <option value="" v-bind:name=&

  • 老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jav

  • JavaScript 获取元素在父节点中的下标(推荐)

    jQuery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=documen

  • Java基于正则表达式获取指定HTML标签指定属性值的方法

    本文实例讲述了Java基于正则表达式获取指定HTML标签指定属性值的方法.分享给大家供大家参考,具体如下: 有时可能会有这样的需求,从HTML页面获取指定标签的指定属性值,可以通过第三方库解析来获取,但是这样相对比较麻烦! 如果使用正则表达式,那么就变得简单了.代码如下: package com.mmq.regex; import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import

随机推荐