// 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. Redis详解(八)——企业级解决方案

    Redis详解(八)--企业级解决方案 缓存预热 缓存预热就是系统上线后,提前将相关的缓存数据直接加载到缓存系统.避免在用户请求的时候,先查询数据库,然后再将数据缓存的问题!用户直接查询事先被预热的缓 ...

  2. 007.Delphi插件之QPlugins,插件的卸载和重新加载

    效果图如下,可以反复卸载和重新加载.QPlugins这个插件,还没弄明白,摸索着跟着DEMO写 主窗口代码如下 unit Frm_Main; interface uses Winapi.Windows ...

  3. 1.HDFS分布式文件系统

    HDFS概述及设计目标 如果让我们自己设计一个分布式文件存储系统,怎么做? HDFS设计目标 非常巨大的分布式文件系统 运行在普通廉价的硬件上 易扩展,为用户提供性能不错的文件存储系统 HDFS架构 ...

  4. 08 SSM整合案例(企业权限管理系统):05.SSM整合案例的基本介绍

    04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户和角色操作 10.权限关联 11.AOP日志 05.SSM整合案例的基本介绍 ...

  5. 01 DDL(DataDefinitionLanguage)

    注: 语句用 ; 或 \g \G 表示结束 .       建库语句 :         CREATE DATABASE db_name ;          查询有哪些库 :         SHO ...

  6. 2.9 学习总结 之 【Android】体温统计APP

    一.说在前面 昨天 学习了JQ的相关知识 今天 编写体温统计APP 我的工程源码:https://github.com/xiaotian12-call/Take-body-temperature 二. ...

  7. POJ 2823:Sliding Window 单调队列

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 48930   Accepted: 14130 ...

  8. Percona-Toolkit 之 pt-archiver 删除历史数据

    pt-archiver是Percona-Toolkit工具集中的一个组件,是一个主要用于对MySQL表数据进行归档和清除工具.它可以将数据归档到另一张表或者是一个文件中.pt-archiver在清除表 ...

  9. 一百零七、SAP的OO-ALV之一,新建程序

    一.来带SE38模块,新建一个Z_TIANPAN_20190807_OOALV的本地程序 二.设置一个标题,点击对勾 三.选择保存为本地对象 我们下一篇来写创建屏幕

  10. 六十一、SAP中的逻辑运算与进制转换

    一.代码如下 二.16进制计算过程如下 三.计算结果为16进制的11,也就是10进制的17