getComputedStyle() 和 getPropertyValue()
// getComputedStyle() 方法用于获取指定元素的 CSS 样式。
// 获取的样式是元素在浏览器中最终渲染效果的样式。
// getPropertyValue() 方法返回指定的 CSS 属性的值。

<style>
#elem-container {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<div id="elem-container">测试</div>
let elem = document.getElementById("elem-container");
let theCSSprop = window.getComputedStyle(elem, null)
console.log(theCSSprop.width);
console.log(theCSSprop.backgroundColor);
console.log(theCSSprop.getPropertyValue("height"));
getComputedStyle() 和 getPropertyValue()的更多相关文章
- CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute
js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- getPropertyValue 获取CSS样式
新学习一个js 的方法 getPropertyValue (实现 js框架中 css 的最终调用的函数),取得元素最终计算出的css 样式 DEMO: <!DOCTYPE html> ...
- getPropertyValue (实现 js框架中 css 的最终调用的函数)
,取得元素最终计算出的css 样式 var a = document.getElementById("content"); alert("style "+ ...
- 转贴:获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- js学习进阶-元素获取及样式设置
var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...
- 解密jQuery内核 样式操作
基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
随机推荐
- 收藏!阿里云maven镜像配置文件
<?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...
- php绕过open_basedir设置
原理关于open_basedir open_basedir是php.ini中的一个配置选项 它可将用户访问文件的活动范围限制在指定的区域, 假设open_basedir=/home/ ...
- 【转】Spark Streaming 实时计算在甜橙金融监控系统中的应用及优化
系统架构介绍 整个实时监控系统的架构是先由 Flume 收集服务器产生的日志 Log 和前端埋点数据, 然后实时把这些信息发送到 Kafka 分布式发布订阅消息系统,接着由 Spark Streami ...
- Netty 中队列的使用
任务队列中的Task有3种典型使用场景 用户程序自定义的普通任务 此前代码: 参考https://www.cnblogs.com/ronnieyuan/p/12016712.html NettySer ...
- 吴裕雄--天生自然java开发常用类库学习笔记:Arrays
import java.util.* ; public class ArraysDemo{ public static void main(String arg[]){ int temp[] = {3 ...
- 学习进度05(billbill长评爬取02)
今天下雪了,是个看<白色相簿2>的好日子. 昨天我们获取所有长评url,今天要解析这些url获取更多的信息随便,点开一个,我们需要的数据有标题,时间,内容.点赞数和评论先不弄了. 解析js ...
- Linux下的文件目录树结构
Linux下的文件目录及文件结构 一.文件和文件夹 在Linux系统下,一切皆是文件.就连Linux本身也是基于文件表示的操作系统. 1.文件:文件在Linux系统之下,一般分为两种:一是一般性文件, ...
- 074-PHP数组元素相乘
<?php $arr1=array(3,4,5,6,'7',TRUE); //等价于 3*4*5*6*7*1=2520 $arr2=array(3,4,5,6,'7','hello'); //等 ...
- [题解] LuoguP3784 [SDOI2017]遗忘的集合
要mtt的题都是...... 多补了几项就被卡了一整页......果然还是太菜了...... 不说了......来看100分的做法吧...... 如果做过付公主的背包,前面几步应该不难想,所以我们再来 ...
- 实验吧-密码学-这里没有key(VBScript脚本加密)
打开网页,查看源代码,发现一段乱码,这就是加密后的密文. #@~^TgAAAA=='[6*liLa6++p'aXvfiLaa6i[[avWi[[a*p[[6*!I'[6cp'aXvXILa6fp[:6 ...