【JS中各种宽度、高度、位置、距离总结】的更多相关文章

js中各种宽度高度总结

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

JS中各种宽度距离小结

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

HTML中常见的各种位置距离以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client…

Js中的各种高度问题

一.屏幕宽高相关 屏幕高度就是你的整个屏幕高度(开机会亮的那片区域的高度),相关的其他高度划分很简单,就是以任务栏为分界线从而分为两部分. screen.height :屏幕高度. screen.width :屏幕宽度. screen.availHeight :屏幕可用高度.即屏幕高度减去上下任务栏后的高度. screen.availWidth :屏幕可用宽度.即屏幕宽度减去左右任务栏后的宽度. 二.浏览器宽高相关 浏览器高度就是你能看到的浏览器高度(如果你改变浏览器窗口大小,下边获取的值也会改…

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中获取浏览器高度和宽度值的多种方法(多浏览器)

三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度…

js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）

offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框). offsetWidth:描述元素外尺寸宽度,是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个),不包括外边距和滚动条部分.…

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

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

js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置. 附上调试代码: <style> *{margin:0;padding:0;} #parent{ position: relative; padding: 10px; margin:30p…

js和jq中常见的各种位置距离之offset和offset()的区别（三）

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前窗口的偏移坐标 附上调试代码: <style> *{margin:0;padding:0;} #parent{ position: relative; padding: 10px; margin:30px; b…