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 ...
随机推荐
- Java 的 String.split 函数,消除空字符串
代码: String str = "the music made it hard to concentrate"; String delims = "[ ]+" ...
- 面试-PA和XSYX面试小结
XSYX 1.自我介绍 2. 最近一个项目的业务和技术栈 3. 分布式锁解决库存问题 4. spring的IOC和AOP讲解 5. 类加载器层级 6.线程池核心参数和问题 7. 期待的团队是怎样的? ...
- (最详细)JAVA如何连接虚拟机的HBASE和hadoop(JAVA如何远程访问虚拟机HBASE)
第一步: 首先把虚拟机和你的主机(本地电脑)弄通这样本地机器才能访问虚拟机里面的内容 我用的虚拟机为 VMware Workstation linux 为 centeros 补充一点虚拟机设置 1 ...
- 吴裕雄--天生自然java开发常用类库学习笔记:一对多关系范例
import java.util.List ; import java.util.ArrayList ; public class School{ private String name ; priv ...
- 02 DML(DataManipulationLanguage)
1.插入记录 基本语法 : INSERT INTO tbl_name (col_name ,col_name1,..,col_nameN) VALUES (val1,val2, ...
- 官网英文版学习——RabbitMQ学习笔记(五)Publish/Subscribe
发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...
- 逆战:微信小程序
微信小程序的生命周期 onLaunch: function(options) { // ...
- 概率图模型之EM算法
一.EM算法概述 EM算法(Expectation Maximization Algorithm,期望极大算法)是一种迭代算法,用于求解含有隐变量的概率模型参数的极大似然估计(MLE)或极大后验概率估 ...
- C#的listview
listView1.Items.Clear(); ListViewItem listitem = new ListViewItem(字符串);//这是第一列的内容,需要,而且必须通过构造方法添加 ; ...
- laravel自动加载公共文件
1. 创建 functions.php 在 app/Common/(目录自己起名字)下新建一个文件 functions.php,在内部补充如下代码: <?php /** 数据返回 * 返回jso ...