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浏览器使用element.currentStyle，W3C标准浏览器使用getComputedStyle来获取。

1. IE获取元素外部定义的CSS属性值: element.currentStyle

currentStyle对象返回了元素上的样式表，但是style对象只返回通过style标签属性应用到元素的内嵌样式。

因此，通过currentStyle对象获取的样式值可能与通过style对象获取的样式值不同。

例如，如果段落的color属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象style.color不能返回值。但是，如果用户指定了 <P STYLE="color:'red'">，currentStyle和STYLE对象都将返回值 red。
currentStyle对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：

1) 内嵌样式

2) 样式表规则

3) HTML 标签属性

4) HTML 标签的内部定义

2. W3C获取元素外部定义的CSS属性值: window.getComputedStyle(element, pseudoElt)
element必选，HTML元素
pseudoElt必选，获取该元素的伪类样式


代码如下:

function getStyle(node, property){
if (node.style[property]) {
return node.style[property];
}
else if (node.currentStyle) {
return node.currentStyle[property];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(node, null);
return style.getPropertyValue(property);
}
return null;
}

赞 (0)

相关推荐

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

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

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

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

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

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

  • 原生javascript获取元素样式

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

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

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

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

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

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

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

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

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

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

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

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

  • 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浏览器使用

  • 老生常谈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

  • javascript获取元素离文档各边距离的方法

    本文实例讲述了javascript获取元素离文档各边距离的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function getDistance(obj) {   if (!obj instanceof jQuery) {       obj = $(obj);   }   var distance = {};   distance.top = (obj.offset().top - $(document).scrollTop());   distance.bottom

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

随机推荐