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

    <div id="box"></div>
    #box{
        background-color: lightgrey;
         300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
        height:60px;
    }
    //获取盒子的内容高度,内容高度也可用用box.clientHeight获取,内容高度不包括边框和外边距和滚动条
    var box = document.getElementById("box")
    var contentHeight = window.getComputedStyle(box).height //输出 '60px'
    
    //获取盒子客户端的高度
    box.clientHeight //输出110 (内容高度+padding * 2)
    
    //获取盒子自身实际高度
    box.offsetHeight //输出160 (内容高度 + 内边距*2 +边框*2)
    //如果box的父容器没有设置定位,则box.offsetLeft是相对body而言,否则是根据离它最近且有设置定位的父容器而言
    box.offsetLeft //获取box盒子相对它的父容器水平的偏移
    box.offsetTop //获取box盒子相对它的父容器垂直的偏移
    
    //当一个容器设置高度,如果该容器有滚动条,则该容器的内容高度要减去滚动条的高度,滚动条的高度一般为17px
  • 相关阅读:
    ORM补充文件
    auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'
    JS BOM和DOM
    ctrl+shift+上箭头 改变代码位置
    盒子半透明
    多背景颜色写图片后面
    心跳
    动画
    仿站小工具哈哈哈
    旋转案例
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/12316450.html
Copyright © 2011-2022 走看看