zoukankan      html  css  js  c++  java
  • js获取元素宽高

    只说ie8+的浏览器的方法。

    在转vue之前,一直使用jquery来获取元素的宽高,最近转vue,发现了一个问题。使用vue的时候,部分操作需要在mounted这个生命周期里面去做,官网对mounted的解释是:

    如果不在vm.$nextTick里面做操作的时候,是很有可能获取不到组件内部元素的宽高的。刚开始的时候,我没有仔细看官网,所以在mounted里面是直接获取不到子孙元素的宽高的。

      后来,看了iview的一个组件的源码,看到了getComputedStyle方法获取宽高,对getComputedStyle好奇起来。下面梳理一下,怎么使用js获取元素的宽高的几种比较靠谱的方法。

    1. window.getComputedStyle(dom, null).styleName   获取宽高的话,styleName分别对应width、height   
      • 返回值: string
      • 兼容性:caniuse.com上面兼容到ie11,我测试的是ie9+
      • 获取到的string类型,以px为单位,做数值操作的话,需要转成number类型
      • 获取到的是不包括边框、内边距以及滚动条的宽高值,在元素隐藏或者还未渲染到页面上的时候,也可以获取宽高
      • 至于其他的操作,请自行查阅资料,不做展开
    2. dom.clientWidth/dom.clientHeight 
      • 返回值:number
      • 获取元素可见内容区域的宽/高,包括内边距,不包括边框和滚动条  
    3. dom.offsetWidth/dom.offsetHeight
      • 返回值:number
      • 获取元素可见区域的宽高,包括内边距、边框、滚动条
    4. dom.scrollWidth/dom.scrollHeight
      • 返回值:number
      • 获取元素内容区域的宽高。这地方又分了两种情况:1.当内容区的宽高没有超出元素的宽高时,则等于clientWidth/clientHeight;2.一旦超出的话,则等于内容区域的宽度+元素左边内边距的值

    可以看下面的实例:

    html代码:

    <div class="parent">
         <div class="child"></div>
    </div>
    

    css代码:

    .parent{
         600px;
        border: 1px solid #ccc;
        padding: 30px;
        height: 100px;
        margin: 100px auto 0;
        background: red;
        overflow: auto;
    }
    .child{
         700px;
        height: 200px;
    }
    

    js代码:

    var dom = document.getElementsByClassName("parent")[0];
    var w0 = dom.style.width,   //不建议
          w1 = window.getComputedStyle(dom, null).width,
          w2 = dom.clientWidth ,
          w3 = dom.offsetWidth,
          w4 = dom.scrollWidth;
    console.log(w0);
    console.log(typeof w0);
    console.log(w1);
    console.log(w2);
    console.log(w3);
    console.log(w4);  

    结果输出:

  • 相关阅读:
    三个心态做人做学问 沧海
    成功走职场要找准自己的"快捷键" 沧海
    免费离线下载 拂晓风起
    Hibernate 获取某个表全部记录时 奇怪现象 (重复出现某个记录) 拂晓风起
    无法读取mdb 如果连接不了ACCESS mdb文件,就尝试安装MDAC 拂晓风起
    Netbeans 使用 Hibernate 逆向工程 生成hbm和pojo 拂晓风起
    如何点击单选框 radio 后面的文字,选中单选框 拂晓风起
    Java 连接access 使用access文件 不用配置 拂晓风起
    mysql下如何执行sql脚本 拂晓风起
    Hibernate配置access Hibernate 连接 access 拂晓风起
  • 原文地址:https://www.cnblogs.com/yanyalun/p/7604647.html
Copyright © 2011-2022 走看看