利用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 = ' ...
随机推荐
- android学习日记21--消息提示之Toast和Notification
1.Toast Toast译为土司,类似切片面包,用于弹出比较快速的及时提示信息.当Toast被显示时,虽然它悬浮应用程序最上方,但是并未获得焦点.它的设计就是为了提示有用的信息,而不打扰用户其他操作 ...
- 使用air进行移动app开发常见功能和问题(二)
1. Air如何判断android.ios 平台网络连接状态? Android,使用as3原生api: if(NetworkInfo.isSupported)//只有android支持 Networ ...
- sleep() wait() yield() join()用法与区别
1.sleep()方法 在指定时间内让当前正在执行的线程暂停执行,但不会释放“锁标志”.不推荐使用. sleep()使当前线程进入阻塞状态,在指定时间内不会执行. 2.wait()方法 在其他线程调用 ...
- JavaScript知识点回顾
一 浏览器对象树 window:处于对象树中的最高层,表示一个浏览器窗口,由于唯一,可以省略不写.(window.document 等价 document) Forms.Images.Links ...
- js内置对象处理-打印学生成绩单
效果图: 任务: 1.通过js的内置对象得到当前日期 var date=new Date(); var year=date.toString().slice(11,15); document.writ ...
- JDK Tools - jps: JVM 进程状态工具
jps(Java Virtual Machine Process Status Tool) 是 JDK 提供的一个显示当前所有 Java 进程实例的命令. 命令格式 jps [ options ] [ ...
- 使用 Spring 2.5 基于注解驱动的 Spring MVC
http://www.ibm.com/developerworks/cn/java/j-lo-spring25-mvc/ 概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Sp ...
- JavaScript高级程序设计(八):基本概念--操作符
操作符包括:算术操作符.位操作符.关系操作符和相等操作符. 一元操作符 1.只能操作一个值得操作符,即递增和递减操作符: 2.递增(++)和递减(--)操作符包括:前置型和后置型.前置型位于要操作的变 ...
- WCF编程系列(一)初识WCF
WCF编程系列(一)初识WCF Windows Communication Foundation(WCF)是微软为构建面向服务的应用程序所提供的统一编程模型.WCF的基本概念: 地址:定义服务的 ...
- python输出1到100之和的几种方法
1. 使用内建函数range print sum(range(1,101)) 2. 使用函数reduce print reduce(lambda a,b:a+b,range(1,101)) 3. 使用 ...