zoukankan      html  css  js  c++  java
  • offsetTop、offsetLeft、offsetWidth、offsetHeight的用法

    假设 obj 为某个 HTML 控件。
    
    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。
    
    obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。
    
    obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。
    
    obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。
    
    我们对前面提到的 offsetParent 作个说明。
    
    offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。
    
    以上属性在 FireFox 中也有效。
    
    另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。
    
    这几个参数来制作图片的滚动,文字的滚动
    
    
    
    网页可见区域宽: document.body.clientWidth; 
    网页可见区域高: document.body.clientHeight;  
    
     
    
    网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 
    网页可见区域高: document.body.offsetHeight  (包括边线的宽); 
    
    网页正文全文宽: document.body.scrollWidth; 
    网页正文全文高: document.body.scrollHeight; 
    
    网页被卷去的高: document.body.scrollTop; 
    网页被卷去的左: document.body.scrollLeft; 
    
    网页正文部分上: window.screenTop; 
    网页正文部分左: window.screenLeft; 
    
    屏幕分辨率的高: window.screen.height; 
    屏幕分辨率的宽: window.screen.width; 
    
    屏幕可用工作区高度: window.screen.availHeight; 
    屏幕可用工作区宽度:window.screen.availWidth;
    ------------------------------------------------------------------------------------------------------
    来源于:http://www.cnblogs.com/rixinren/archive/2010/04/25/1720680.html
  • 相关阅读:
    Vue+element UI实现“回到顶部”按钮组件
    JS判断字符串长度的5个方法(区分中文和英文)
    从vue源码看Vue.set()和this.$set()
    mac下git安装与使用
    JS数组reduce()方法详解及高级技巧
    vue中router.go、router.push和router.replace的区别
    上传及更新代码到github(以及如何在vscode上提交自己的代码)
    VSCode打开多个项目文件夹的解决方法
    get请求和post请求的区别
    android 进程的优先级
  • 原文地址:https://www.cnblogs.com/dingyingsi/p/4617422.html
Copyright © 2011-2022 走看看