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

参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left…

JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读评论(0) 收藏

原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性. client:使用区.客户区.指的是客户区,当然是指浏览器区域. offset:偏移.指的是目标甲相对目标乙的距离. scroll:卷轴.卷动.指的是包含滚动条的的属性. inner:内部…

JS中各种宽度距离小结

js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性. client:使用区.客户区.指的是客户区,当然是指浏览器区域. offset:偏移.指的是目标甲相对目标乙的距离. scroll:卷轴.卷动.指的是包含滚动条的的属性. inner:内部.指的是内部部分,不含滚动条. avail:可用的.可用区域,不含滚动条,易与i…

DOM盒模型和位置 client offset scroll 和滚动的关系

DOM盒模型和位置 client offset scroll 和滚动的关系概览在dom里面有几个描述盒子位置信息的值, pading border margin width height client clientWidth 不要border clientHeight 不要border offset offsetTop offsetLeft offsetWidth 要border offsetHeight 要border scroll scrollTop scrollHeight scr…

JS中client/offset/scroll等的宽高解析

原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerHeight获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在).窗口镶边(window chrome)和窗口调正边框.包含调试窗及浏览器边框 window.outerWidth表示整个浏览器窗口的宽度,包括侧边栏(如果存在).窗口镶边(window chrome)和调正窗口大小的边框.包含…

client,offset,scroll系列

client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了,就是边框的宽度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度例: <head> <meta charset="UTF-8"> <title>Title…

JS-特效～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr）；、缓动动画封装

知识点: 模拟滚动条的解除事件问题 : event内置对象,包含了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)true 最好写前边: window.screen.width/height : 检测屏幕分辨率: 屏幕宽高: window.screen.width. window.screen.height : 可视区域宽高兼容性写法: function client(){ if (window.inner…

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; /*m…

JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth: 获取浏览器窗口外部的宽度.表示整个浏览器窗口的宽度,包括侧边栏(如果存在).窗口镶边(window chrome)和调正窗口大小的边框 window.outerHeight:获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在).窗口镶边(window chrome)和窗口调正边框(wi…

client offset scroll 之间的区别

一.client 属性值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左边框的宽度 clientTop 上边框的宽度二.offset 属性值 offsetWidth 元素被设置的宽度 + padding左右内间距 + 左右边框的值 offsetHeight 元素被设置的高度 + padding上下内间距 + 上下边框的值 offsetLeft 元素外边距离父级左内…

js中各种宽度高度总结

offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 IE6.0.FF1.06+:offsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5:offsetWidth = widthoffsetHeight = height clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那…

JS中各种宽度、高度、位置、距离总结

1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于窗体高度为y个像素的位置,同理X, (0,0)为返回顶部,即将滚动条移动到(0,0)位置. 3.window.scrollBy(x,y) 相对于当前滚动条的移动,将纵向(横向)滚动条移动到相对于当前纵向(横向)滚动条高度为y(x)个像素的位置,例:Y正值向下移动,负值向上移动.同理X. 4.wind…

Js 中一系列宽度和高度的学习

在学习元素一系列宽度和高度之前,我们先来看一个平时开发中几乎不会遇到的问题,那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响.几乎不会遇到,是因为我们在写html 文件时,编辑器会自动帮助我们生成html文件的模版.在vs code中, 按 !,再加enter或tab 键,就生成了,非常简单方便.而它最开始的一行就是<!DOCTYPE html> 而我在这里却遇到了没有写文档声明的html 文件,是因为我在学习h5 的history api 实现路…

js中的这些距离你知道吗？

…

JavaScript 特效之四大家族（offset/scroll/client/event）

三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以属性形式存在. 不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息. 1. offset 系列 offset:偏移.补偿.位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法. (1) offsetWidth 和 offsetHeigh…

python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

昨日作业讲解: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以实现效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s…

JS 中的offset、scroll、client总结

经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度,包括滚动条.padding.border,不包括overflow隐藏的部分 offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的父级元素中最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, 则offsetP…

python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr() DOM属性操作:对DOM元素的属性进行读取,设置和移除操作.比如prop().removeProp() 类样式操作:是指对DOM属性className进行添加,移除操作.比如addClass().removeClass().toggleClass() 值操作:是对…

了解Js中的client，offset

Client clientWidth,clientHeight 元素内部的宽度和高度,clientTop,clientLeft 元素内边距到其边框的距离,clientX,clientY相当于浏览器窗口到事件的坐标系 clientWidth,clientHeight 元素的宽度高度都会把内边距计算在内,不包括边框,外边距,滚动条. clientTop,clientLeft 元素的上边框和左边框的宽度当元素为行内元素时,clientTop,clientLeft 将返回 0; 当出现滚动条时,两种情…

JS-元素大小深入学习-offset、client、scroll等学习研究笔记

一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offset偏移量学习</title> <meta name="author" content="郭菊锋/702004176@…

js中对象的一些特性，JSON，scroll家族

一.js中对象的一些特性对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值获得对象的属性的方式为元素设置DOM0级事件二.JSON Javascript Object Notation 即一种轻量级的数据交换格式,我们称之为js对象表示法;使用JSON进行数据传输的优势之一就是轻量,表示法就是流行的键值对,Key:value. JSON的结构: JSON值的获取: 点语法和中括号,推荐用点语法,可以不用在意属性的是否有引…

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1…

offset 、 client 和 scroll - PC端网页特效

1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以动态得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小(宽度和高度) 3.返回的数值都不带单位 1.2 offset 系列常用属性(元素以带有定位的父亲为准,如果没有父亲,或者父亲没有定位,则以 body 为准) element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft …

js三大家族offset,scroll,cliennt的区别

offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,padding,不包括margin; offsetWidth:返回盒子的宽度,包括border,padding,不包括margin; offsetX: offsetY: offsetParent:找到有定位的父元素 offset与style.top的区别: 1.offset可以返回没有定位的盒子距离左边…

js中scroll滚动相关

js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关属性/方法解释 element.scrollHeight 返回元素的整体高度. element.scrollWidth 返回元素的整体宽度. element.scrollLeft 返回元素左边缘与视图之间的距离. element.scrollTop 返回元素上边缘与视图之间的距离. 这四个属性,全部是只读属性其中,无非就是分为宽高和左上. 两个方向. 1.scrollHeight 和 sc…

offset / scroll / client Left / Top

1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 2.clientHeight / clientWidth (只读) clientHeight:元素内容区的高度+元素内边距的高度 clientWidth:元素内容区的宽度+元素内边距的宽度 clientWidth = width + padd…

JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息

一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一个student对象 student.name = "easy"; // 属性name student.age = 20; // 属性age b.字面量方式,例如: var student = { name : "easy", age : 20 }; 2.工厂模式创建对…

js中的盒子模型

说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin:; padding:; } .box { position: absolute; margin: 10px; padding: 10px; width: 100px; height: 100px; border: 10px solid #000; line-height: 25px; } html…

前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

小例子: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以实现效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <styl…

js中尺寸类样式

js中尺寸类样式一:鼠标尺寸类样式都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离 clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离 clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离 2:…

【20190430-screen、client、offset、scroll等JS中各种宽度距离】的更多相关文章