一、getComputedStyle

  getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。

  语法如下:

var style = window.getComputedStyle("元素", "伪类");
//例
var dom = document.getElementById("test");
var style = window.getComputedStyle(dom , ":after"); //获取属性可以用 getPropertyValue (不驼峰 IE9+),getAttribute(驼峰) style.getAttribute("backgroundColor");
style.getPropertyValue("border-top-left-radius");

  Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null);

  

  getComputedStyle IE6~8是不支持的。

  IE可以用CurrentStyle,它是IE浏览器自娱自乐的一个属性

  例如,我们要获取一个元素的高度,可以类似下面的代码:

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

  

二、style

  element.style 可读可写。

  getComputedStyle 方法获取的是最终应用在元素上的所有CSS属性对象(包括默认),而element.style只能获取元素style属性中的CSS样式。

三、getBoundingClientRect()

  

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

  IE8一下只有上下左右可获取到,默认坐标从(2,2)开始计算,

var right =  box.getBoundingClientRect().right;
var left = box.getBoundingClientRect().left; var width = right-left;

JS获取元素CSS值的更多相关文章

  1. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 转贴:获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  3. Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

    因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...

  4. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  5. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  6. getComputedStyle方法获取元素CSS值

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

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

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

  8. js获取元素transform参数得出的个人理解

    之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. ...

  9. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

随机推荐

  1. [LeetCode] First Bad Version 第一个坏版本

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  2. [LeetCode] Substring with Concatenation of All Words 串联所有单词的子串

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  3. .NET跨平台之旅:探秘 dotnet run 如何运行 .NET Core 应用程序

    自从用 dotnet run 成功运行第一个 "Hello world" .NET Core 应用程序后,一直有个好奇心:dotnet run 究竟是如何运行一个 .NET Cor ...

  4. Ubuntu下基于Saprk安装Zeppelin

    前言 Apache Zeppelin是一款基于web的notebook(类似于ipython的notebook),支持交互式地数据分析,即一个Web笔记形式的交互式数据查询分析工具,可以在线用scal ...

  5. python基础-软件目录结构规范

    一.定义目录结构目的 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定义好组织规则 ...

  6. Spring缓存机制的理解

    在spring缓存机制中,包括了两个方面的缓存操作:1.缓存某个方法返回的结果:2.在某个方法执行前或后清空缓存. 下面写两个类来模拟Spring的缓存机制: package com.sin90lzc ...

  7. 滚来滚去,滚来滚去...Scroller完全解析

    API: 1 mScroller.getCurrX() //获取mScroller当前水平滚动的位置 2 mScroller.getCurrY() //获取mScroller当前竖直滚动的位置 3 m ...

  8. C#基础练习

    1.冒泡排序 namespace _0 { class Program { public static int[] BubbleSort(int[] arr) { ; i < arr.Lengt ...

  9. 【Beta】Scrum09

    Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...

  10. 逆向工程学习第一天--一个VC6编译的小程序

    今天开始研究二进制了,开个文记录一下.下面是一个小程序的OD反汇编代码,自己尝试加了注释,本人逆向零基础,属于摸着石头过河的类型,有理解错误的地方,希望大牛不吝赐教. 源代码: #include< ...