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]; 
} // www.jbxue.com
else if (document.defaultView && document.defaultView.getComputedStyle) { 
var style = document.defaultView.getComputedStyle(node, null); 
return style.getPropertyValue(property); 

return null; 

javascript 获取元素样式的方法的更多相关文章

  1. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  2. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  3. javascript获取元素样式值

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  4. 原生js获取元素样式

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

  5. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  6. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  7. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  8. JavaScript获取元素尺寸和大小操作总结(转载)

    一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...

  9. 多浏览器兼容用javascript获取url参数的方法比较推荐的一种

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...

随机推荐

  1. rabbitmq日志记录进出的每条消息

    参考: https://blog.csdn.net/u013256816/article/details/76039201 https://blog.csdn.net/aosica321/articl ...

  2. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十:SDRAM模块③ — 页读写 α

    实验二十:SDRAM模块③ — 页读写 α 完成单字读写与多字读写以后,接下来我们要实验页读写.丑话当前,实验二十的页读写只是实验性质的东西,其中不存在任何实用价值,笔者希望读者可以把它当成页读写的热 ...

  3. 禁用ngen版本的.NET Framework dll加载

    在调试时会发现出于性能考虑.NET Framework dll加载的都是ngen版本,比如:System.dll,实际加载System.ni.dll. 如果希望加载非ngen版本,可以设置系统环境变量 ...

  4. 23种设计模式之适配器模式(Adapter)

    适配器模式将一个接口转换成客户希望的另一个接口,从而使接口不兼容的那些类可以一起工作.适配器模式既可以作为类结构型模式,也可以作为对象结构型模式.在类适配器模式中,通过使用一个具体类将适配者适配到目标 ...

  5. csdn博客刷点击率(java代码)

    此文为转载,亲测有效. import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; impo ...

  6. 分布式文件系统FastDFS架构剖析

    ps.本文来自于网络 一.什么是FastDfs FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载 ...

  7. iOS多线程编程技术之NSThread、Cocoa NSOperation、GCD

    原文出处: 容芳志的博客 简介iOS有三种多线程编程的技术,分别是:(一)NSThread(二)Cocoa NSOperation(三)GCD(全称:Grand Central Dispatch) 这 ...

  8. iOS取整

    小数向上取整,指小数部分直接进1            x=3.14,ceilf(x)=4 小数向下取整,指直接去掉小数部分          x=3.14,floor(x)=3

  9. C++ 术语(C++ Primer)

    argument(实参):传递给被调用函数的值.block(块):花括号括起来的语句序列.buffer(缓冲区):一段用来存放数据的存储区域.IO 设备常存储输入(或输出)到缓冲区,并独立于程序动作对 ...

  10. 【AngularJs-模块篇-Form篇】

    1.模块 <!doctype html> <html lang="en-US" ng-app="myApp"> <head> ...