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

  • 相关阅读:
    使用DRF视图集时自定义action方法
    DRF视图集的路由设置
    DRF视图集的使用
    DRF最高封装的子类视图
    SQL Stored Procedure and Function
    Struts & Hibernate & Spring
    Java Knowledge series 5
    Android OS Startup
    Java Knowledge series 4
    Refactoring in Coding
  • 原文地址:https://www.cnblogs.com/wahaha-/p/14111523.html
Copyright © 2011-2022 走看看