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 ...
随机推荐
- Vmware 和 VisualSVN-Server端口冲突
安装 VisualSVN-Server 时,发现他和 Vmware 在端口 443 冲突: 先把本地自启动的 Vmware 全部停止,并改成手工启动服务: 这样可以节省资源,再安装 svn服务时 ...
- 057、Java中break的用法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- JavaScript基于原型的继承
在一个纯粹的原型模式中,我们会摒弃类,转而专注于对象,基于原型的继承相比基于类的继承的概念上更为简单 if( typeof Object.beget !== 'function') { Object. ...
- 解析underscore中的throttle
什么是throttle(节流) Throttling enforces a maximum number of times a function can be called over time. 简单 ...
- window 如何访问虚拟机的mapreduce(遇到的坑)
首先 先把你虚拟机和本机网络链接弄通 (详情看上一篇) 一些关于mapreduce 和hadoop的配置都在上一篇 安装eclipse 的hadoop Map/Reduce插件详情 看其他博客园.. ...
- UVA - 225 Golygons (黄金图形)(回溯)
题意:平面有k个障碍点.从(0,0)出发,第一次走1个单位,……,第n次走n个单位,恰好回到(0,0),每次必须转弯90°,图形可以自交,但不能经过障碍点.按字典序输出所有移动序列,并输出序列总数. ...
- C# OBJ模型解析的封装(网上看到的保留一份)
/// <author>Lukas Eibensteiner</author> /// <date>19.02.2013</date> /// < ...
- wamp修改端口localhost
一.修改Apache端口 1.在界面中选Apache,弹出隐藏菜单选项,打开配置文件httpd.conf: 2.找到 Listen 80: ServerName localhost:80; 3.将 8 ...
- Jrebel 远程热部署[Idea]
服务器端 客户端-idea remote module 在服务器端,Tomcat的webapps下新建项目文件夹,如: demo/WEB-INF/classes/[jrebel.xml]
- 11.json
import json # json反序列化 # json_str = '{"name":"qiyue","age":18}' # stud ...