在平时的工作中有时候会碰到需要获取元素当前样式的问题，查了一下可以用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. PHP中的正则表达式函数preg_

    preg_match();     //用于正则表达式的匹配,且只匹配一次 preg_match_all();//用于正则表达式的匹配,会对所有符合规则的都进行匹配 preg_replace();   ...

  2. [置顶] API相关工作的个人总结_工作中琐碎细节的总结二

    续接上篇,今晚又看了看大牛的书,再结合过往工作,总结如下: 1.弃用原理与删除原则做权衡. 2.正确性与易用性的把握. 3.不能因为过度的追求性能提升而违背API的设计原则. 4.兼容性不仅仅是表象的 ...

  3. wcf-2

    1.前言 上一篇,我 们通过VS自带的模板引擎自动生成了一个wcf程序,接下来我们将手动实现一个wcf程序.由于应用程序开发中一般都会涉及到大量的增删改查业务,所以这 个程序将简单演示如何在wcf中构 ...

  4. careercup-C和C++ 13.10

    13.10 用C编写一个my2DALLoc函数,可分配二维数组.将malloc函数的调用次数降到最少,并确保可通过arr[i][j]访问该内存. 解法: 这道题目最简单的方法就是先开一个数组来存储指向 ...

  5. android startActivityForResult(Intent intent, int requestCode) 整理与总结！ .

    假设有两个Activity,主界面A,功能界面B,由A启动B,并传数据给B,B在经过处理后把数据传回给A. 先是A传B: Bundle bundle = new Bundle();bundle.put ...

  6. 一个.Net程序员：既然选择了编程，只管风雨兼程（转）

    一个.Net程序员:既然选择了编程,只管风雨兼程 一次会议记录是不会有人感兴趣的,做标题党也是不道德的.所以,走了个折衷的路线,标题不叫会议记录, 内容不纯总结,技术加吐槽,经验加总结. 对于一个程序 ...

  7. 快递查询API接口对接方法

    各类接口 快递查询API有即时查询和订阅查询两种,即时是请求即返回数据,订阅则是订阅快递单号到接口,有物流轨迹更新则全量返回数据.目前常用的有快递鸟.快递100.快递网等. 快递鸟即时API可以查询3 ...

  8. ViewFlipper的简单使用实现图片轮播效果

    /** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...

  9. Android_Dialog

    layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  10. LintCode 55 比较字符串

    比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 注意事项 在 A 中出现的 B 字符串里的字符不需要连续或者有序.   样例 给出 A = "ABC ...