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

getComputedStyle的使用

getComputedStyle接收两个参数，第一个参数是一个元素，第二个参数是一个可选的伪元素。

getComputedStyle方法返回一个包含所有样式的对象，可以通过length方法获取这个对象的长度。

获取元素某个css属性的值

获取元素css属性值的方法有两种，一种是通过getComputedStyle方法返回的对象调用getPropertyValue方法，这个方法接收一个属性名作为参数，返回属性值。(这个方法的参数不必采用驼峰的写法，如想要获取背景颜色，直接传入"background-color"即可)

另外一种方法是直接使用getComputedStyle方法返回的对象的索引。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            background: red;

            width: 300px;

            height: 300px;

        }

    </style>

</head>

<body>

<div id="box" style="width: 100px">

</div>

</body>

<script>

    var box = document.getElementById("box");

    var styleList = window.getComputedStyle(box);

    console.log(styleList.length);          //262   (chrome下)

    console.log(styleList.width);           //100px

    console.log(styleList.height);          //300px

    console.log(styleList.backgroundColor); //rgb(255, 0, 0)

    console.log(styleList.getPropertyValue("background-color"));  //rgb(255, 0, 0)

</script>

</html>

参考：https://css-tricks.com/get-value-of-css-rotation-through-javascript/

获取元素CSS值之getComputedStyle方法熟悉-张鑫旭

利用getComputedStyle方法获取元素css的属性值的更多相关文章

  1. getComputedStyle方法获取元素CSS值

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

  2. Selenium_获取元素文本、属性值、尺寸（8）

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...

  3. java利用反射动态获取实体类的属性值

    直接贴代码吧,有需要的话,可以根据自己的需要修改部分代码: public BigDecimal getByAttributeName(ThmdGwqriR thmdGwqriR, String att ...

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

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

  5. 转贴：获取元素CSS值之getComputedStyle方法熟悉

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

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

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

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

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

  8. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

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

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

随机推荐

  1. Android在线更新 远程安装程序

    原文:http://blog.csdn.net/jasper_success/article/details/7984065 第一步:使用java.net的URLConnection对象来创建连接 第 ...

  2. Nginx加多个tomcat实现负载均衡，动静分离

    一:Nginx+Tomcat的动静分离 所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件,从 ...

  3. UIAlertController 简单修改title以及按钮的字体颜色

    苦逼的开发者,最终败给了一个任性的UI,系统原生UIAlertController的按纽颜色必须改.于是,开始了不归路.之前的版本是自己用view写的一个仿系统UIActionSheet,动画感觉都挺 ...

  4. 06---Java基础、面向对象

    一.Java基础 1.Java概述 Java语言特点:                     简单性.解释性.面向对象.高性能.分布式处理                     多线程.健壮性.动 ...

  5. iOS开发——新特性OC篇&Objective新特性

    Objective新特性 Overview 自 WWDC 2015 推出和开源 Swift 2.0 后,大家对 Swift 的热情又一次高涨起来,在羡慕创业公司的朋友们大谈 Swift 新特性的同时, ...

  6. android的项目文件介绍

    1.res目录存放Android的各种资源文件,比如layout存放布局文件main.xml,values存放各种xml格式的资源文件,字符串资源strings.xml,颜色资源文件:colors.x ...

  7. C++中如何修改const变量

      一.结论 声明:不同于C语言的const变量修改问题(可以通过指针间接修改const变量的值),这里只讨论C++ 里的const. C++ const 修饰符,表示常量,即如果以后保证不会修改则声 ...

  8. 【转】在XCode工程中创建bundle包

    http://www.giser.net/?p=859 Bundle Programming Guide: https://developer.apple.com/library/ios/docume ...

  9. 在IOS中 NSRange类详解

    NSRange的定义 typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; NSRange是一个结构 ...

  10. CSS内容

    选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 border-radius box-shadow border-image