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 ...
随机推荐
- 值得一学的C语言
P1085 不高兴的津津 #include <stdio.h> int main( ) { int a,b; int max=0; int result; for (int i = 0; ...
- python 文件夹递归
import ospath = "F:/new" #文件夹目录datas = []def eachFile(filepath): fileNames = os.listdir(fi ...
- NOR Flash驱动
驱动程序 1 ] ] );81 ;83 }84 85 86 static void __exit nor_exit(void)87 {88 iounmap(nor_ ...
- LCD驱动详解
参考文档:<液晶屏.pdf><S3C2440用户手册><JZ2440-V3原理图> frame buffer: 显存,用于存放LCD显示数据:frame buf ...
- Ajax学习系列——创建XMLHttpRequest对象
Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest: XMLHttpRequest是Ajax的基础.中文可以解释为可扩展超文本传输请求.术语缩写为XHR. ...
- 10.swoole学习笔记--进程队列通信
<?php //进程仓库 $workers=[]; //最大进程数 $worker_num=; //批量创建进程 ;$i<$worker_num;$i++){ //创建子进程 $proce ...
- 138-PHP static后期静态绑定(一)
<?php class test{ //创建test类 public function __construct(){ self::getinfo(); //后期静态绑定 } public sta ...
- 【iOS】Swift4.0 GCD的使用笔记
https://www.jianshu.com/p/47e45367e524 前言 在Swift4.0版本中GCD的常用方法还是有比较大的改动,这里做个简单的整理汇总. GCD的队列 队列是一种遵循先 ...
- python画一只佩奇
用python画一只佩奇 from turtle import* def nose(x,y):#鼻子 penup()#提起笔 goto(x,y)#定位 pendown()#落笔,开始画 sethead ...
- ProxyPass与ProxyPassReverse及ProxyPassMatch的概述
转载自:https://blog.csdn.net/xiaokui_wingfly/article/details/51481653 apache中的mod_proxy模块主要作用就是进行url的转发 ...