js盒子模型

最新推荐文章于 2023-09-18 19:09:03 发布

艺术就是派大星220

最新推荐文章于 2023-09-18 19:09:03 发布

阅读量338

点赞数

分类专栏： javascript 文章标签： javascript

原文链接：https://blog.csdn.net/qq_23389687/article/details/80164123

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js中提供一些属性和方法用来描述盒子的样式的

clientWidth/clientHeight

当前盒子可视区域的宽度和高度 
可视区域：内容的宽高+padding*2 
clientHeight = height+padding(top&&bottom) 
clientWidth = height+padding(left&&right) 
他们的值和内容是否溢出和是否设置了overflow:hidden没有关系

clientTop和clientLeft

只有top和left，没有其他的 
clientTop：盒子上边框的高度 
clientLeft：盒子左边框的宽度 
通过JS盒子模型获取的结果是不带单位的，而且只能是整数，（他会自动四舍五入）

offsetWidth和offsetHeight

在clientHeight和clientWidth的基础上加上了边框的长度； 
offsetWidth=clientWidth+左右边框(border) 
offsetHight=clienthight+上下边框 
真实项目中，如果想要得到盒子的宽度和高度一般都用offsetWidth和offsetHeight，这样就包含了盒子的边框

offssetParent: 当前盒子的父级参照物（得到父级参照物元素）

父级参照物不等价于父级元素，与父级元素没有直接关系 
父级参照物：同一平面中最外层容器是所有里层盒子的父级参照物 
一般情况下，一个页面所有元素的父级参照物都是body，body没有父级参照物；

但是一旦某些元素设置了position（relative/absolute/fixed）就会形成一个新的平面，那么其内部元素的父参照物就不在是body，而是当前元素本身

offsetTop&offsetLeft:当前元素外边框距离父级参照物的内边框的偏移量 
（标准IE8浏览器特殊性： 当前元素最外边框距离父级参照物的外边框的偏移量 ）

实现获取页面中任何一个元素距离body的左偏移和上偏移

function offset(element) {
			// 1.首先获取当前元素的父参照物和其距离父参照物的偏移
			let parent = element.offsetParent,
				top = element.offsetTop,
				left = element.offsetLeft;
			// 2.循环依次向上查找父参照物（一直到找不到为止）
			while (parent) {
				// 加上父参照物的边框（非IE8浏览器中才加）
				if (!/MSIE 8/.test(navigator.userAgent)) {
					left += parent.clientLeft;
					top += parent.clientTop;
				}
				// 加上父参照物的偏移值
				left += parent.offsetLeft;
				top += parent.offsetTop;
				// 继续向上查找
				parent = parent.offsetParent;
			}
			// 3.把查找的结果返回
			return {
				// top:top
				top,
				left
			};
		}
window.navigator.userAgent 获取浏览器的版本号

scrollHeight&& scrollWidth

没有内容溢出：获取的结果和clientWidth、clientHeight的结果相同； 
有内容溢出：真实内容的宽度或高度，包含溢出内容的值，再加上padding或左padding的值 
scrollWidth&&scrollHeight获取的是约等于的值，由于内容溢出，每个浏览器对于行高或文字的渲染不一样，回去的结果也不一样 
是否设置overflow：hidden对最后的结果也有影响

scrollLeft&&scrollTop

横向或竖向滚动条卷去的宽度或高度 
(在拉动滚动条时，上面的内容会被卷去，就是scrollTop)

最小值：0
最大值：scrollHight-clientHight:真实页面高度-一屏幕的高度
前面的JS盒子模型的属性都是只读属性，只能获取，不能修改；而scrollTop&&scrollLeft是可读写属性，既可以获取，也可以修改；

实现按钮点击回到页面顶部的效果

<body>
	<button id="GOTO">回到顶部</button>


	<!-- IMPORT JS -->
	<script>
		// 开始不显示回到顶部按钮，当随着滚动条滚动，卷去的高度超过了一屏幕的大小，我们再显示这个按钮
		window.onscroll = function () {
			// onscroll不论我们基于什么方式，控制了滚动条的滚动，都会触发这个事件，让绑定的方法执行
			let sT = document.documentElement.scrollTop,
				cH = document.documentElement.clientHeight;
			if (sT >= cH) {
				GOTO.style.display = 'block';
			} else {
				GOTO.style.display = 'none';
			}
		};

		GOTO.onclick = function () {
			document.documentElement.scrollTop = 0;
		};
	</script>
</body>

艺术就是派大星220

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js盒子模型

js中提供一些属性和方法用来描述盒子的样式的clientWidth/clientHeight当前盒子可视区域的宽度和高度可视区域：内容的宽高+padding*2 clientHeight = height+padding(top&&bottom) clientWidth = height+padding(left&&right) 他们的值和内容是否溢出和是否设置了overflow:hidden没有关系clientTop和clientL...
复制链接

扫一扫

专栏目录