来源:http://www.ido321.com/930.html

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

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

   1: var ele = document.getElementById('ele');
   2: ele.style.color;    //获取颜色

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

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

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

   1: var ele = document.getElementById('ele');
   2: var styles = window.getComputedStyle(ele,null);
   3: styles.color;  //获取颜色

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

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

   1: var ele = document.getElementById('ele');
   2: var styles = ele.currentStyle;
   3: styles.color;

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

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

   1: var ele = document.getElementById('ele');
   2: window.getComputedStyle(ele,null).getPropertyValue('color');

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

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

   1: var test = document.getElementById('test');
   2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

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

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

   1: function getStyle(ele) {
   2:     var style = null;
   3:
   4:     if(window.getComputedStyle) {
   5:         style = window.getComputedStyle(ele, null);
   6:     }else{
   7:         style = ele.currentStyle;
   8:     }
   9:
  10:     return style;
  11: }

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

利用原生JavaScript获取样式的方式小结的更多相关文章

  1. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  2. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  3. JavaScript获取样式值的几种方法学习总结

    本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...

  4. 使用JavaScript获取样式的属性值

    1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 .   在IE浏览器中,使用currentStyle来获取 ...

  5. 原生JavaScript获取css样式

    访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...

  6. 原生JavaScript 获取下一个/上一个同胞元素

    看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery  prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...

  7. 利用原生Javascript实现计算器(未完待续)

    这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...

  8. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

  9. 10个原生JavaScript技巧

    这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作 ...

随机推荐

  1. [topcoder]BoxesDiv2

    https://community.topcoder.com/stat?c=problem_statement&pm=13192 #include <vector> #includ ...

  2. 去掉eclipse的xml和js验证

    一.XML Properties > Validation you have two options: 1- Configure Workspace Settings (disable the ...

  3. HDU5093——Battle ships(最大二分匹配)(2014上海邀请赛重现)

    Battle ships Problem DescriptionDear contestant, now you are an excellent navy commander, who is res ...

  4. jquery.pagination.js分页插件的使用

    Pagination的相关参数: Pagination使用的核心代码:         //回调函数         function pageselectCallback(page_index, j ...

  5. 实现微信好友列表的php代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. C++STL之map的基本操作

    STL中基本的关联式容器有map和set,它们都是以红黑树作为其底层的结构,具有非常高的查找.删除效率,内容会按照键值自动排序. 使用map的注意事项: 1.关联式容器的键值是不允许修改的,所以永远不 ...

  7. MinGW GCC下sleep()函数问题

    在MinGW GCC下编译带sleep()函数的测试程序,不管是包含了unistd.h头文件,还是stdio.h.stdlib.h头文件,就是找不到该函数的定义!在linux下,sleep()函数的头 ...

  8. UVa 1467 (贪心+暴力) Installations

    题意: 一共有n项服务,每项服务有安装的时间s和截止时间d.对于每项任务,如果有一项超出截止时间,惩罚值为所超出时间的长度.问如何安装才能使惩罚值最大的两个任务的惩罚值之和最小. 分析: 如果是求总惩 ...

  9. CodeForces Round #278 (Div.2) (待续)

    A 这么简单的题直接贴代码好了. #include <cstdio> #include <cmath> using namespace std; bool islucky(in ...

  10. SharedPreferencesUtil

    用于缓存一个临时的变量 比如 SharedPreferencesUtil.put(getApplicationContext(), "userImage", user.conten ...