// 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. SQL——左连接(Left join)右连接(Right join)内连接(Inner join)

    概念(定义) ​首先还是介绍一下这三个的定义 ​Left join:即左连接,是以左表为基础,根据ON后给出的两表的条件将两表连接起来.结果会将左表所有的查询信息列出,而右表只列出ON后条件与左表满足 ...

  2. springboot创建bean

    springboot创建bean的方式有两种: 1.直接类上加注解@Component@Controller@Service ... 2.使用@Bean注解配合@Configuration注解 区别是 ...

  3. JSON数组序列化C#方法

    /// <summary> /// dataTable转换成Json格式 JSON对应关系 三层数组 /// </summary> /// <param name=&qu ...

  4. editplus的注册码 4.0

    用户名:jb51.net 序列号:9A72F-84A30-82Z46-BFW79-4FTA8 用户名:freeuser 序列号:F15AD-12490-DAZF5-E4W30-E7T80 注册名:Fr ...

  5. POJ 1655:Balancing Act

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10311   Accepted: 4261 De ...

  6. mongodb单机版的安装和配置

    首先根据操作系统下载MongoDB的相关安装文件 下载后上传到linux上,解压 将解压后的文件夹重新命名为monggodb4.0.1 命令mv 配置必要的文件夹mgdata存放运行数据,mglog存 ...

  7. 时间戳和LocalDateTime和Date互转和格式化

    一 前言 续上篇java8在日常开发中使用LocalDate和LocalTime[https://blog.csdn.net/youku1327/article/details/102771936]中 ...

  8. pandas中na_values与keep_default_na

    我们在使用pandas读取文件时,常会遇到某个字段为NaN. 一般情况下,这时因为文件中包含空值导致的,因为pandas默认会将 '-1.#IND', '1.#QNAN', '1.#IND', '-1 ...

  9. 十六、JavaScript之%运算符

    一.代码如下 二.运行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...

  10. Impala 笔记

    简介 Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能. 基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等优点 是CDH平台首选的PB级 ...