// 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. Java 的 String.split 函数,消除空字符串

    代码: String str = "the music made it hard to concentrate"; String delims = "[ ]+" ...

  2. 面试-PA和XSYX面试小结

    XSYX 1.自我介绍 2. 最近一个项目的业务和技术栈 3. 分布式锁解决库存问题 4. spring的IOC和AOP讲解 5. 类加载器层级 6.线程池核心参数和问题 7. 期待的团队是怎样的? ...

  3. (最详细)JAVA如何连接虚拟机的HBASE和hadoop(JAVA如何远程访问虚拟机HBASE)

    第一步: 首先把虚拟机和你的主机(本地电脑)弄通这样本地机器才能访问虚拟机里面的内容 我用的虚拟机为 VMware Workstation linux 为 centeros 补充一点虚拟机设置 1  ...

  4. 吴裕雄--天生自然java开发常用类库学习笔记:一对多关系范例

    import java.util.List ; import java.util.ArrayList ; public class School{ private String name ; priv ...

  5. 02 DML(DataManipulationLanguage)

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

  6. 官网英文版学习——RabbitMQ学习笔记(五)Publish/Subscribe

    发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...

  7. 逆战:微信小程序

                                                            微信小程序的生命周期 onLaunch: function(options) { // ...

  8. 概率图模型之EM算法

    一.EM算法概述 EM算法(Expectation Maximization Algorithm,期望极大算法)是一种迭代算法,用于求解含有隐变量的概率模型参数的极大似然估计(MLE)或极大后验概率估 ...

  9. C#的listview

    listView1.Items.Clear(); ListViewItem listitem = new ListViewItem(字符串);//这是第一列的内容,需要,而且必须通过构造方法添加 ; ...

  10. laravel自动加载公共文件

    1. 创建 functions.php 在 app/Common/(目录自己起名字)下新建一个文件 functions.php,在内部补充如下代码: <?php /** 数据返回 * 返回jso ...