利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题，查了一下可以用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的属性值的更多相关文章
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
- Selenium_获取元素文本、属性值、尺寸（8）
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...
- java利用反射动态获取实体类的属性值
直接贴代码吧,有需要的话,可以根据自己的需要修改部分代码: public BigDecimal getByAttributeName(ThmdGwqriR thmdGwqriR, String att ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- 转贴：获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- 原生js使用getComputedStyle方法获取CSS内部属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
随机推荐
- 手机端overflow scroll卡顿的情况
在容器里设置或者html,body{-webkit-overflow-scrolling: touch;}
- [MODx] 7. MIGX DB
MODx provides a really unfriendly way to work with xPDO class. What I means is you need to define XM ...
- [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent
Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following ...
- android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现
## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...
- mysqldump原理2
本文主要探讨 mysqldump 的几种主要工作方式,并且比较一下和 mk-parralel-dump的一些差异,为备份方式的选择提供更多的帮助. 首先来看下 mysqldump 的几个主要参数的实际 ...
- Qt数据库(sqlite) — 总结
#include <QtSql>QT += sql QSqlDatabase类实现了数据库连接的操作QSqlQuery类用来执行SQL语句QSqlRecord类 封装数据库所有记录 第一: ...
- Memcached source code analysis -- Analysis of change of state--reference
This article mainly introduces the process of Memcached, libevent structure of the main thread and w ...
- How to Tune Java Garbage Collection--reference
reference:http://architects.dzone.com/articles/how-tune-java-garbage The Performance Zone is support ...
- java.lang.NoSuchFieldError: RAW_XML_FILE_HEADER，调用XWPFTemplate动态合并生成一个新的docx文档时报错
在使用 org.apache.poi 对office文件 根据表单内容和已上次的附件 动态合并成一个新的文档时,本地调试完全ok 但是发布倒Linux环境上就老是报这个错误java.lang.NoS ...
- Java基础知识强化之IO流笔记67：Properties的特殊功能使用
1. Properties的特殊功能 public Object setProperty(String key,String value):添加元素 public String getProperty ...