// 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()的更多相关文章

  1. CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute

    js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...

  2. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  3. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  4. getPropertyValue 获取CSS样式

    新学习一个js 的方法 getPropertyValue   (实现 js框架中  css 的最终调用的函数),取得元素最终计算出的css 样式 DEMO: <!DOCTYPE html> ...

  5. getPropertyValue (实现 js框架中 css 的最终调用的函数)

    ,取得元素最终计算出的css 样式 var a = document.getElementById("content");    alert("style "+ ...

  6. 转贴:获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  7. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  8. 解密jQuery内核 样式操作

    基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...

  9. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

随机推荐

  1. Spark Scheduler 模块(上)

    在阅读 Spark 源代码的过程中,发现单步调试并不能很好的帮助理解程序.这样的多线程的分布式系统,更好的阅读源代码的方式是依据模块,分别理解.   在包 org.apache.spark 下面有很多 ...

  2. eshop4-tomcat 安装

    1. 下载tomcat 7 2. 解压缩 注意:是否使用sudo 权限执行请根据具体环境来决定 3. sudo vim /etc/profile 在最下方增加 export CATALINA_HOME ...

  3. JS: 子项可以来回交换的两个下拉列表

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. HttpClient测试

    导入maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson&l ...

  5. 02 DML(DataManipulationLanguage)

    1.插入记录     基本语法 :         INSERT INTO tbl_name (col_name ,col_name1,..,col_nameN) VALUES (val1,val2, ...

  6. JuJu团队11月26号工作汇报

    JuJu团队11月26号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 对原始文本进行预处理, 并转换成可被julia读入的格式 完成预处理并用julia读入. 读入后按 ...

  7. 《ES6标准入门》(阮一峰)--4.字符串的扩展

    1.字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点. "\u0061" ...

  8. 八十、SAP中数据库操作之 (FOR ALL ENTRIES IN )用法,比较难明白

    一.代码如下 二.查询结果如下 三.我们把it_spfli的内表内容添加两个 四.结果如下,查询的是所有的JFK和SFO机场. *&------------------------------ ...

  9. flink任务性能优化

    如何提高 Flink 任务性能 一.Operator Chain 为了更高效地分布式执行,Flink 会尽可能地将 operator 的 subtask 链接(chain)在一起形成 task,每个 ...

  10. Node.js NPM 作用

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...