// 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. 收藏!阿里云maven镜像配置文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  2. php绕过open_basedir设置

    原理关于open_basedir    open_basedir是php.ini中的一个配置选项    它可将用户访问文件的活动范围限制在指定的区域,    假设open_basedir=/home/ ...

  3. 【转】Spark Streaming 实时计算在甜橙金融监控系统中的应用及优化

    系统架构介绍 整个实时监控系统的架构是先由 Flume 收集服务器产生的日志 Log 和前端埋点数据, 然后实时把这些信息发送到 Kafka 分布式发布订阅消息系统,接着由 Spark Streami ...

  4. Netty 中队列的使用

    任务队列中的Task有3种典型使用场景 用户程序自定义的普通任务 此前代码: 参考https://www.cnblogs.com/ronnieyuan/p/12016712.html NettySer ...

  5. 吴裕雄--天生自然java开发常用类库学习笔记:Arrays

    import java.util.* ; public class ArraysDemo{ public static void main(String arg[]){ int temp[] = {3 ...

  6. 学习进度05(billbill长评爬取02)

    今天下雪了,是个看<白色相簿2>的好日子. 昨天我们获取所有长评url,今天要解析这些url获取更多的信息随便,点开一个,我们需要的数据有标题,时间,内容.点赞数和评论先不弄了. 解析js ...

  7. Linux下的文件目录树结构

    Linux下的文件目录及文件结构 一.文件和文件夹 在Linux系统下,一切皆是文件.就连Linux本身也是基于文件表示的操作系统. 1.文件:文件在Linux系统之下,一般分为两种:一是一般性文件, ...

  8. 074-PHP数组元素相乘

    <?php $arr1=array(3,4,5,6,'7',TRUE); //等价于 3*4*5*6*7*1=2520 $arr2=array(3,4,5,6,'7','hello'); //等 ...

  9. [题解] LuoguP3784 [SDOI2017]遗忘的集合

    要mtt的题都是...... 多补了几项就被卡了一整页......果然还是太菜了...... 不说了......来看100分的做法吧...... 如果做过付公主的背包,前面几步应该不难想,所以我们再来 ...

  10. 实验吧-密码学-这里没有key(VBScript脚本加密)

    打开网页,查看源代码,发现一段乱码,这就是加密后的密文. #@~^TgAAAA=='[6*liLa6++p'aXvfiLaa6i[[avWi[[a*p[[6*!I'[6cp'aXvXILa6fp[:6 ...