首页 > > 网页制作 > Javascript >

使用原生JS定位网页元素

2018-06-24 01:25:54来源：未知阅读 ()

约定：1.<meta name="viewport" content="width=device-width">这种标记简称"wdw"="width=device-width"

约定：2.viewport简称vp

约定：3.常用的属性会有“★”标志

都是只读属性！

其中Chrome或FF没通过的属性标记（未实现）

window对象：

1.★innerHeight:文档（网页）显示区的高度，以像素计。（这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度）

2.★innerWidth

对于手机浏览器来说，innerWidth计算的是vp宽度，当没有wdw时候，iphone7的默认vp是980px，所以其innerWidth也是980px；而当加上wdw时，innerWidth值会变成375px，这个值就是wdw的值。（我们认为PC浏览器的vp是个不固定的值，它随着网页宽高的变化而1：1地变化，例如网页900*750px，那么浏览器自动把vp变成900*750px，然后在vp中渲染这个网页，再把vp放入浏览器窗口中给用户看。遇到用户浏览器窗口太小不能完全显示时，则加上滚动条；遇到用户浏览器窗口过大时，放大vp宽至浏览器窗口宽度大小，然后把网页渲染进vp，对于那些百分数的元素放大，对于那些绝对单位值的元素不做放大，最后把vp放入浏览器窗口中，这是布局意义上的放大）

另外，在手机上，如果一网页宽大于wdw设置的值，那么vp的width会等于该网页的宽，渲染完成之后，放入浏览器窗口，会加上水平滚动条。

所以总结一下wdw的所有情况：（约定：网页实际宽简称wtw = webpage true width；不存在wdw时vp宽 = 默认值，如980px；手机浏览器窗口 = mbw = mobile browser window）

一定要时刻记得，wdw用来设置vp的宽，但最后不一定相等！

wtw = wdw：网页刚好完全渲染到vp中，然后vp以1：1放到mbw中

wtw > wdw：vp宽将不等于wdw，它会按照wtw宽适当增加，然后以新宽度渲染网页，最后放入mbw中，但是因为mbw的宽比vp小，所以会加上水平滚动条

wtw < wdw：网页完全渲染到vp中，对于那些设置百分数之类属性的元素会占有更多的空间来补满多出的vp宽，而绝对单位的值的那些元素不做任何放大

3.outerHeight:整个浏览器的高度

4.★pageXOffset pageYOffset（对于整个窗口来说，要对于具体某个元素请看DOMElement对象中的有关属性）

screen对象：

1.availHeight:浏览器可用的屏幕高度，不包括底部任务栏

2.availWidth

3.（未实现）deviceXDPI:屏幕的每英寸水平点数

4.（未实现）deviceYDPI

5.height:屏幕的总高度，相对于availHeight来说这个属性包含了任务栏

6.width:其值和availWidth一样

7.colorDepth:色彩深度，即俗称的颜色多少位（24位就是真彩色）

8.pexelDepth:像素深度

9.（未实现）updateInterval屏幕的刷新率

DOMElement对象：

1.★clientHeight:元素的显示高度（包括内边距，不含边框和外边距）

2.★clientWidth:

对于PC浏览器，它对于网页显示都是1：1的，所以clientWidth获取的总是元素实际的宽度，但是手机浏览器实际上是把网页渲染在vp上再放入浏览器的可见区域中，所以你获取的是元素的实际宽度，但事实上显示出来的宽度要小，因为他已经被缩放过了。

有如下案例：（页面只存在一个div元素，宽高都为40px）

对于iphone7默认vp的宽为980px，那么

不加wdw：document.body.clientWidth=980-8*2=974px（这个获取的是vp宽！），这时获取div的clientWidth是40px，这个值是不会变的，因为就是元素本身的宽度，但是手机上显示出来的显示宽度为22px

加上wdw：document.body.clientWidth=375-8*2=359px，说明这个手机的网页窗口显示宽度为375px，这时候的div显示的宽度是40px（你要知道为什么要设置vp == 手机浏览器窗口大小，就是为了不缩放网页）

3.offsetHeight:clientHeight + 边框

4.offsetWidth

5.offsetTop:元素的上外边框至offsetParent的上内边框之间的像素

6.offsetLeft

7.offsetParent:返回该元素最近的定位父元素

前言：对于一个绝对定位元素，如果一直到body（包括body）都没有在它所有父元素中发现定位（绝对和相对）属性，即该元素不存在定位父元素，那么他将会按照浏览器窗口左上角定位。一般body不设置定位属性（绝对、相对和固定），所以对于offsetParent来说如果返回body，那该元素没有定位父元素，实际上对于没有定位父元素的元素其值应该返回null而不是body。

1.fixed定位元素，返回null（但在ff中返回body，这不符合标准），因为它相对于浏览器窗口定位，对于fixed元素获取的offsetTop和offsetLeft其实就是它的top和left值

2.body的offsetParent永远是null（chrome和ff都是null，测试通过），对body获取其offsetTop和offsetLeft获取的值是相对于浏览器窗口左上角定位

3.static元素永远是最近的拥有relative或absolute的父元素，如果父元素都不存在定位则返回body（实际上应该返回null，表示没有定位父元素，要按照浏览器窗口定位，但是chrome和ff都返回body），这时（这里指如果时的情况）该元素的offsetTop和offsetLeft值是相对于浏览器窗口左上角定位而不是根据返回的body元素进行定位，否则如果存在父元素有定位属性，那么offsetTop和offsetLeft返回的是该父元素左上角定位的值（以自己的边框外部到定位父元素的包括内部）

3.absolute定位元素遵循css定位布局，即最近的拥有relative或absolute的父元素，如果不存在，那么返回body，offsetTop和offsetLeft以浏览器窗口左上角定位

4.relative在css定位布局中不存在定位父元素，但是这里它的offsetParent还是最近的父级定位元素（relative和absolute），如果不存在，返回body，并且offsetTop和offsetLeft以浏览器窗口左上角定位

5.对于absolute & relative，如果父元素都没有定位（绝对和相对）那么就是body，并且offsetTop和offsetLeft以浏览器窗口左上角定位

总结：对于DOMObj.offsetParent返回的值，浏览器不会管DOMObj是static还是absolute还是relative，如果它有定位父元素，那么按照定位父元素左上角定位，否则没有定位父元素的话，那么返回body，并且按照浏览器左上角定位；对于fixed，offsetTop和offsetLeft就是其top和left值。

8.scrollHeight:元素的实际高度（包括内边距，不含边框和外边距）（与clientHeight区别在于：例如一个textarea，宽度为100px，边框宽度1px，当文字太多时显示水平滚动条，这时clientWidth=102px，而scrollWidth=102px + 滚动条滚出去的宽度）

9.scrollWidth

10.scrollLeft:元素（滚动条）滚出的像素

11.scrollTop:scrollHeight=scrollTop+clientHeight

总结：

获取一个元素在窗口左上角定位的信息：

（JS）getBoundingClientRect()

（JQ）offset()

获取一个元素的宽高信息：

（JS）clientWidth clientHeight

说明：包含内边距，不含边框和外边距

（JQ）width() height() innerWidth() innerHeight() outerWidth(false) outerHeight(false)

说明：前两个不含内边距、边框、外边距；中间两个包含内边距，不含边框，外边距；后两个包含内边距，边框，如果为真也会包含外边距