最近研究过DOM,这是js操作的基础,不明白,你无法与浏览器交谈。没有多少废话,今天的客户端,偏移,滚动和风格广泛的家庭左翼深入讨论,铬作为一个例子,其他浏览器可能有分析差异。特别:
1.clientWidth,clientHeight,clientLeft,clientTop;
2.offsetWidth,offsetHeight,offsetLeft,offsetTop;
3.scrollWidth,scrollHeight,scrollLeft,scrollTop;
4.高度,宽度。clientWidth顾名思义,客户,客户。特定于诸如html,body或a,p的元素,img指的是该元素,而不是诸如浏览器之类的常规理解的客户端。Html标签:当html各种属性是默认值时,internal是空头和body元素,clientWidth值是视口宽度。例如,我的电脑屏幕宽度是1366px。当浏览器缩放时,该值变为缩放。宽度,当出现垂直滚动条时,需要减去滚动条的宽度(当高度大于可见屏幕的高度时,会出现垂直滚动条,可能是html或其子元素)。移动浏览器不支持缩放,因此默认情况下,此值是内置视口宽度。所谓的视口宽度不是硬件屏幕宽度,而是虚拟宽度。例如,iphone6是980px,实际屏幕宽度不是这样。大。
因为影响宽度的属性是宽度,边距,填充,边框,轮廓。我们一个一个地看一下。将HTML设置为宽度,边距,填充,边框,轮廓中的任何一个或全部时,ClientWidth不受影响。也就是说,客户端的HTML宽度仅与客户端的内置视口宽度和用户的缩放行为有关。
如果内部元素体不是默认值,而是设置宽度,边距,填充,边框,轮廓任何一个或积累,我们来看看HTML clientWidth的性能。经过测试,无论有多少设置都不会影响HTML clientWidth,请验证此值仅与客户端的内置视口宽度和用户缩放有关。与行为有关的结论。
如果右侧出现滚动条,则通常在元素高度高于浏览器的可见部分时出现。该值需要减去滚动条的宽度,即16px。
上述测试中使用的Chrome浏览器可能与其他浏览器不同。总之,HTML标记的值仅与客户端和用户缩放行为的内置视口宽度相关。
身体标签:
当body标签的各种属性是默认值时,内部为空,而父元素html是默认属性。其clientWidth值与html相同,后者受客户端内置视口宽度和缩放行为的影响。如果有一个滚动条,滚动条的宽度应减去16px,并且主体默认为8px左右。
提示:正文的最大clientWidth为3355430px。
如果父元素,子元素的每个属性的值仍然是默认值,则body设置上面的五个值,如width,会发生什么?设置宽度时,该值变宽。设置填充时,值变为宽+填充,即设置本身具有优先级,设置其他三个不受影响。此宽度不受限制,范围从0到无穷大。当然,这无法验证。如果该值太大,浏览器将崩溃。如果默认值由其自身保存,则父元素html执行5值测试并设置宽度。结果变为宽度值减去16px的滚动条宽度,即使没有出现滚动条。设置其他值不受影响。也就是说,客户端的clientWidth受父元素html的宽度影响,其他值不影响该值。如果父元素和父元素保持默认值并且子元素更改5个项目,则该值不受影响。在上面验证之后,正文的值仅受其宽度+填充和父元素html宽度的影响,并且其值更优先,即,一旦宽度本身设置为+ padding,则父元素的宽度无效。p标签(块元素):当父元素,子元素和它自身是默认值时,需要从父元素的默认边距8px中减去该值,并且当滚动条出现时需要减去滚动条的宽度。实际上相当于父元素的宽度,如果你有一个边框,你仍然需要减去。当父元素和子元素默认时,上面的5个值由它们自己设置,除了宽度+填充本身,其他值不受影响,也就是说,clientWidth值等于宽度本身加上填充本身。这个结论与身体相同。当子元素和子元素默认时,父元素设置5个项目,该值的行为类似于主体,即值变为父元素的宽度,其他四个项目不影响。
当self和parent元素是默认值时,子元素被设置为5个项目,并且该值将恢复为默认值,即屏幕宽度减去每个8px的左右填充。可以看出,块元素的clientWidth仅受其宽度+填充和父元素宽度的影响。如果未跟踪父元素的宽度,则将跟踪根元素html的默认值。 PC是客户端。端部可见宽,内置视口在移动端宽。如果设置宽度,填充或宽度+填充,则值为值,父元素和继承的宽度将被丢弃。视频(内联块元素):当父级和子级是默认值时,此值为0。当父级和子级是默认值时,它们将值设置为5,这本身就是宽+填充。当子项和子项是默认值时,父项设置值5,即0,不受父元素宽度的影响。这是块元素和块元素之间的差异。当self和parent元素是默认值并且子元素设置为5个值时,这种情况不适用于自闭标签。此值将恢复为默认值,即元素中内置的宽度+填充。因此对于内联块元素,其clientWidth仅受其自身宽度+填充的影响,并且不受其他效果的影响。a(内联元素):当父级和子级是默认值时,此值为0。当父级和子级是默认值时,它们将值设置为5,即0。当其本身和子项是默认值时,父项的值为5,值为0。当其本身和父项是默认值时,子项的值为5,值为0。总而言之,对于内联元素,clientWidth的值始终为0,即使其中有文本元素也是如此。
总之,根元素html仅受默认视口和用户行为的影响;块元素(包括body和其他块clientWidth)受其自身宽度+填充和父元素宽度的影响,并优先于其自身;内联块仅受其自身宽度+填充效果的限制;内联不受影响,始终为0.总之,clientWidth实际上是它自己的宽度+填充。内联元素,内联块和块级元素的总和。好吧,根据这种梳理,这个属性背后隐藏的东西一目了然,然后继续验证和解释家庭中的其他元素。几天前我在互联网上看到了一些文章,并且存在差异,所以我决定找出答案。