在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下:

1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属性。

2. IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法

“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:after”)。如果不需要伪元素信息,第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式。以下面的HTML页面为例:

未完待续……

JS使用getComputedStyle()方法获取CSS属性值的更多相关文章

  1. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  2. 原生js使用getComputedStyle方法获取CSS内部属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...

  3. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  4. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  5. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  6. getComputedStyle方法获取元素CSS值

    javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...

  7. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  8. robotframework,移动端(小程序)自动化,获取元素属性值的方法

    如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...

  9. 自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

随机推荐

  1. Inter1-关于i++和++i

    Q:关于i++和++i计算以下公式的结果 ```public static void main(String[] args) { int i = 1; System.out.println(" ...

  2. jdk安装

    x86 和 x64的安装判别 [root@CentOS ~]# uname -aLinux CentOS 2.6.32-358.el6.i686 #1 SMP Thu Feb 21 21:50:49 ...

  3. 初识Servlet

    1.创建DispatcherServlet package myservlet; import java.io.IOException; import javax.servlet.ServletExc ...

  4. hexo博客-性能优化

    前言 刚开始搭建博客的时候觉得很好玩,可是玩的久了,问题慢慢就出来了,就跟谈恋爱一样==.比如现在我访问博客的时候就感觉慢的要死,不可否认,使用hexo搭建服务器方便快捷,但是由于github作为服务 ...

  5. Splash页面跳转主页面,去掉主页面标题栏

    requestWindowFeature(Window.FEATURE_NO_TITLE); // 去除标题,必须在setContentView之前调用

  6. 基于ARM处理器的反汇编器软件简单设计及实现

    写在前面 2012年写的毕业设计,仅供参考 反汇编的目的 缺乏某些必要的说明资料的情况下, 想获得某些软件系统的源代码.设计思想及理念, 以便复制, 改造.移植和发展: 从源码上对软件的可靠性和安全性 ...

  7. Time Consume Problem

    I joined the NodeJS online Course three weeks ago, but now I'm late about 2 weeks. I pay the codesch ...

  8. php类中的魔术方法

    1.构造函数 析构函数class pt{ function __construct($data) { echo "pt is start ..."; $this->pr($d ...

  9. mdadm设定RAID磁盘阵列,且当分区故障后如何重建

    首先,fdisk建立不同分区,且设为fd格式 其次, mdadm -C md0 -a yes -l -n /dev/sda1 /dev/sdb1 /dev/sdc1 /dev/sdd1 /dev/sd ...

  10. Android快乐贪吃蛇游戏实战项目开发教程-02虚拟方向键(一)自定义控件概述

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.自定义控件简介 在本项目中,无论是游戏主区域还是虚拟方向键都是通过自定义控件 ...