// 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. Scala 线性化规则和 super 操作

    如果一个类有多个父类,且父类的有相同的函数 f,在子类和父类中调用 super.f 都是按从右到左的调用函数的顺序. 这个规则名为:Linearization Rules 如下的代码 trait Ba ...

  2. HTTP实战

    1.建立http服务,要求: (1)提供两个基于名称的虚拟主机: www1.stuX.com,页面文件目录为/web/vhosts/www1;错误日志为/var/log/httpd/www1/erro ...

  3. poj 2456 Aggressive cows 贪心+二分

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25944   Accepted: 11982 ...

  4. 1-VCP 框架

    VMware 硬件兼容性网址: 立即同步时间,修改/etc/ntp.conf 文件,增加一行 tos maxdist 30

  5. 安装npm install时,长时间停留在fetchMetadata: sill 解决方法——换npm的源

    安装npm install时,长时间停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch处, ...

  6. TensorFlow2 Part2:基础知识回顾

    python面向对象编程回顾 基础概念: 面向对象的编程简称OOP,它把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向对象的设计思想是抽象出Class,根据Class(类)创建In ...

  7. enlipse 快捷键

    ctrl+shift+o  去掉多余的引用类

  8. JAVA程序中常用概念介绍

    一.关键字.引用.直接量.变量.长量概念 1.关键字 java内部定义的java语言专用的单词,这些单词具有特殊含义,开发人员在定义自己声明的名称时,应该避开这些专用的单词.这些专用的单词也就称之为j ...

  9. CF1141E Superhero Battle

    A superhero fights with a monster. The battle consists of rounds, each of which lasts exactly n minu ...

  10. nested exception is com.mongodb.MongoWaitQueueFullException: Too many operations are already waiting for a connection. Max number of operations (maxWaitQueueSize) of 500 has been exceeded.

    application.yml 添加后两行配置,增加连接池数量data: mongodb: host: *** database: *** port: 27017 username: *** pass ...