AD

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

原生JavaScript获取样式,是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值

ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。(论坛整理)

1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性

var ele = document.getElementById('ele');

ele.style.color; //获取颜色

2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。

复制代码 代码如下:

window.getComputedStyle("元素", "伪类");

这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

复制代码 代码如下:

var ele = document.getElementById('ele');

var styles = window.getComputedStyle(ele,null);

styles.color; //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。

3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。

复制代码 代码如下:

var ele = document.getElementById('ele');

var styles = ele.currentStyle;

styles.color;

注意:对于综合属性border等,ie返回undefined,其他浏览器有的返回值,有的不返回,但是borderLeftWidth这样的属性是返回值的

4、getPropertyValue():获取CSS样式的直接属性名称

复制代码 代码如下:

var ele = document.getElementById('ele');

window.getComputedStyle(ele,null).getPropertyValue('color');

注意:属性名不支持驼峰格式,IE6-8不支持该方法,需要使用下面的方法

5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式

复制代码 代码如下:

var test = document.getElementById('test');

window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意:该方法只支持IE6-8。

下面的获取样式方法兼容IE、chrome、FireFox等

复制代码 代码如下:

function getStyle(ele) {

var style = null;

if(window.getComputedStyle) {

style = window.getComputedStyle(ele, null);

}else{

style = ele.currentStyle;

}

return style;

}

在JQuery中,常用css()获取样式属性,其底层运作就应用了getComputedStyle以及getPropertyValue方法。

标签: 原生js, 获取样式
分类: javascript技巧
时间: 2014-03-23

相关文章

  1. 原生javascript获取元素样式

    这篇文章主要介绍了原生javascript获取元素样式的方法,需要的朋友可以参考下 摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原 ...
  2. 原生javascript获取元素样式属性值的方法

    实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性. 所以, 我们得利用IE的currentSty ...
  3. javascript 获取元素样式必杀技

    这篇文章主要介绍了javascript 获取元素样式必杀技,需要的朋友可以参考下 Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(&l ...
  4. js正确获取元素样式详解

    当js获取这三种样式时,style只能获取内联样式,获取不到外部样式和嵌入式样式,因此要用currentStyle属性,而currentStyle在FF下不支持 在说js获取元素样式之前,简单地谈一下样式 样式分三种 外 ...
  5. javascript克隆元素样式的实现代码

    这是一个实验用的玩意,它可以克隆指定元素的最终样式,并包装成一个css类,它还可以证明Oprea 11.10 是个混球 /** * 克隆元素样式 * @param {HTMLElement} 被克隆的元素 * @para ...
  6. 原生javascript实现拖动元素示例代码

    首先改变被拖动元素的布局属性,接着捕捉鼠标事件,当触发mousedown时,记录下当前鼠标在元素中的相对位置,接着处理mousemove事件 本文介绍原生javascript实现元素拖动. 思路: 1.首先改变被拖动元素 ...
  7. 原生javascript实现获取指定元素下所有后代元素的方法

    这篇文章主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法,分 ...
  8. 手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

    这篇文章主要介绍了手写的一个兼容各种浏览器的javascript getStyle函数,用来取元素的样式,需要的朋友可以参考下 要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firef ...
  9. javascript获取元素CSS样式代码示例

    如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性,下面我们看看javascript如何获取元素CSS样式 使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式. ...
  10. JavaScript获取元素尺寸和大小操作总结

    本文总结了使用JavaScript获取指定元素大小.位置的几种方式.如果你用的是JQuery,则获取元素大小是非常简单的.但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下 一.获取元素的 ...
  11. JavaScript中获取元素索引的函数

    相信使用过jQuery的朋友都知道index()方法, 她可以很方便的帮你找到当前元素在元素集合中索引位置. 那么, 原生JavaScript中如何获取呢? 这是我在写结构/表现/行为完全分离的选项卡(jQ版和原生JS版 ...
  12. js获取元素外链样式的方法

    这篇文章主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析 ...
  13. javascript通过class来获取元素实现代码

    javascript获取元素有很多的方法,本文简单的介绍下通过class获取元素的实现代码,感兴趣的朋友可以参考下,希望本文知识点可以帮助到你 function getByClass(classname){ var no ...
  14. 一个JavaScript获取元素当前高度的实例

    这篇文章主要为大家介绍了一个JavaScript获取元素当前高度的实例,比较实用,建议新手朋友们可以看看 <!DOCTYPE html> <html> <head> <meta ...
  15. JavaScript中常见获取元素的方法汇总

    本文向大家介绍了javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取,并附上了示例,希望大家能够喜欢. 常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名 ...
  16. javascript获取元素离文档各边距离的方法

    这篇文章主要介绍了javascript获取元素离文档各边距离的方法,以一个自定义函数形式分析了javascript针对文档各边距离的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了javascript ...
  17. javascript通过className来获取元素的简单示例代码

    本篇文章主要是对javascript通过className来获取元素的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 示例如下: <!DOCTYPE html PUBLIC "-// ...
  18. javascript获取元素文本内容的通用函数

    获取元素文本内容的通用函数,思路很好值得参考. 一个获取元素文本内容的通用函数 中华人民共和国1 2 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 将HTML DOM中几个容易常用的属性做下记录: node ...
  19. js获取元素到文档区域document的(横向.纵向)坐标的两种方法

    获取页面中元素到文档区域document的横向.纵向坐标,在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法 获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其 ...