Client Scroll Offset

clientWidth/clientHeight 是我们设置的宽和高加上内边距（没有边框）

clientLeft/clientTop 就是我们设置的边框值

offsetWidth/offsetHeight 是我们设置的宽和高加上边框加上内边距

offsetLeft/offsetTop 是元素外边距离父级的内边距的距离

scrollWidth/scrollHeight 就是我们设置的宽高加上内边距(内容没有溢出的前提下)如果超出了范围就按内容而定

scrollTop/scrollLeft   滚动条卷走的高度和宽度

原文地址：https://www.cnblogs.com/dmzzyc/p/10054744.html

时间： 2024-08-30 09:07:34

Client Scroll Offset的相关文章

JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算

client: clientWidth/clientHeight: 元素内部的宽度/高度,仅包含包含content和padding,不包含滚动条 clientWidth = content width + padding - scrollbar Width clientHeight = content Height + padding - scrollbar Height clientLeft/clientTop: 元素的左border宽度,当文字方向为右至左且出现滚动条时(direction:

JavaScript中的 offset, client,scroll

在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div.offsetLeft 指div距离左侧或上层控件的距离,单位像素 div.offsetWidth 指div 控件本身的宽度,单位像素 div.offsetHeight 指div 控件本身的高度,单位像素 混淆点 clientWidth 指对象看到的宽度,不包含border scrollWidth 是

4.client、offset、scroll系列

client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 client演示 <!DOCTYPE html> <html> <head> <meta cha

client与offset

<style> body{border:10px solid red} </style> console.log("document.body.offsetWidth:"+document.body.offsetWidth);console.log("document.body.clientWidth:"+document.body.clientWidth);console.log("document.body.scrollWidt

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

client、offset、scroll系列

1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*ma

20190430-screen、client、offset、scroll等JS中各种宽度距离

参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 原文地址:https://www.cnblogs.com/nightnight/p/10795215.html

js 元素offset,client , scroll 三大系列总结

1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用scrollWidth 3,element.scrollWidth : 不包含边框 主要用法: 1,offset 系列 经常用于获得元素位置 offsetLeft  offsetTop 2,client经常用于获取元素大小, clientWidth , clientHeight 3,scroll经常用

offset client scroll pageXOffset属性，mouseover与mouseenter事件区别

offset 概述 使用 offset 系列属性可以动态得到该元素的位置(偏移),大小等 offset系列属性 说明(只读属性) ele.offsetTop 返回元素带有定位的父元素上方的偏移,父元素没有定位以body为准 ele.offsetLeft 返回元素带有定位的父元素左边的偏移,父元素没有定位以body为准 ele.offsetWidth 返回自身包括padding,边框,内容去的宽度 ele.offsetHeight 返回自身包括padding,边框,内容去的高度 ele.offse