zoukankan      html  css  js  c++  java
  • javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    下面元素属性和元素方法都通过 elem.属性elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用。

    元素视图属性

    offsetWidth 水平方向 width + 左右padding + 左右border-width
    
    offsetHeight 垂直方向 height + 上下padding + 上下border-width
    
    clientWidth 水平方向 width + 左右padding
    
    clientHeight 垂直方向 height + 上下padding
    
    offsetTop 获取当前元素到 定位父节点 的top方向的距离
    
    offsetLeft 获取当前元素到 定位父节点 的left方向的距离
    
    scrollWidth 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth
    
    scrollHeight 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight
    

    window视图属性

    innerWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏)
    
    innerHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏)
    

    document文档视图

    低版本IE的innerWidth、innerHeight的代替方案

    document.documentElement.clientWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
    
    document.documentElement.clientHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
    
    document.documentElement.offsetHeight 获取整个文档的高度(包含body的margin)
    
    document.body.offsetHeight 获取整个文档的高度(不包含body的margin)
    
    document.documentElement.scrollTop 返回文档的滚动top方向的距离(当窗口发生滚动时值改变)
    
    document.documentElement.scrollLeft 返回文档的滚动left方向的距离(当窗口发生滚动时值改变)
    

    元素方法

    getBoundingClientRect() 获取元素到body   
    
    bottom: 元素底边(包括border)到可视区最顶部的距离     
    
    left: 元素最左边(不包括border)到可视区最左边的距离   
    
    right: 元素最右边(包括border)到可视区最左边的距离    
    
    top: 元素顶边(不包括border)到可视区最顶部的距离   
    
    height: 元素的offsetHeight    
    
     元素的offsetWidth     
    
    x: 元素左上角的x坐标      
    
    y: 元素左上角的y坐标            
    
    scrollIntoView() 滚动元素的父容器让元素滚动到可视区
    

    转载:https://blog.csdn.net/qq_33036599/article/details/81224346

  • 相关阅读:
    IT职场求生法则
    设计模式六大原则
    非win7系统访问win7系统发布的网站
    C#自定义导出Excel
    js操作table元素,表格的行列新增、删除汇集
    一个真正合格的程序员应该具备的素质
    项目心得
    项目心得1
    Spring boot 使用profile完成不同环境的maven打包功能
    关于std容器类的内存使用
  • 原文地址:https://www.cnblogs.com/wahaha-/p/14111523.html
Copyright © 2011-2022 走看看