js中的各种宽高

最新推荐文章于 2021-08-19 22:25:23 发布

阿七氵

最新推荐文章于 2021-08-19 22:25:23 发布

阅读量752

点赞数 2

分类专栏： html css js

本文链接：https://blog.csdn.net/qq_39204474/article/details/78113409

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

额。前几天因为电脑屏幕被我坐坏了，没有办法更（借口借口，坏了三天而已，自己懒）

我自己也是新人，如果有哪里说的不对的地方，希望大家能够留言批评纠正，谢谢大家！（虽然没有几个人看）

言归正传,今天说说各种宽高，和各种距离

1.样式宽/高（ style.width/style.height）

同时说明，这个值通过document.getElementById("id").style.width读取不到，只有将元素的样式设置成内嵌式的，才可以通过来获取宽度值；

单纯的元素的宽高贴上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>宽高</title>
	<style type="text/css">
		#div2 {
			width:200px;
			height:200px;
			border:1px solid white;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var oDiv=document.getElementById('div1');
                       //alert(oDiv.style.width);
             //alert(oDiv.clientWidth);
             //alert(oDiv.offsetWidth);
            alert(oDiv2.offsetTop);
		}
	</script>
</head>
<body>
	<div id="div1" style="width:200px;height:200px;background:red;padding:50px;border:50px solid blue;margin:50px;">
		<div id="div2"></div><!--这是为了更好的视觉效果，没有这个会更严谨因为他也有宽-->
	</div>
</body>
</html>

我们得到的是div的样式宽-------->200px

2.clientWidth,可视宽；指的是样式宽加上padding值在上面这个例子中，将会是300（这个没有单位）

3.offsetWidth:占位宽：指的是可视宽加上border值，在上面这个例子中，将会是400（这个没有单位）

4.offsetTop:定位高：此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离。在上面的例子中，将会是150(这个没有单位)

（1）如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。

（2）如果父元素有定位，所谓的定位就是position属性值为relative、absolute或者fixed。则是子元素顶部到父元素的距离

贴出代码(与上面相比就是改了样式)

上面的例子就是当父级（div1）没有定位时，div2的offsetTop就是div2距离文档内壁的距离（

父级的padding+border+margin=150）

下面的代码就是当父级（div1）有定位，div2的offsetTop就是div2距离父级div1的距离-------->50px（父级的padding）

#div1 {
        position:absolute;
}
#div2 {
	width:200px;
	height:200px;
	border:1px solid white;
}

5.scollTop:滚动高；滚动条到文档顶部的高

5.scollWidth/Height:内容宽，元素内容实际的宽，不包括滚动条所占用的空间（当我们使用了overflow属性的时候）
若div的内容没有超出它的高度，效果和clientHeight一样 .属性值等于height+padding-top+padding-bottom。

若div的内容超过了他的高度，返回的是元素的实际内容的宽度，值=子元素的height值+父元素的padding-top+父元素padding-bottom。）

阿七氵

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
js中的各种宽高

额。前几天因为电脑屏幕被我坐坏了，没有办法更（借口借口，坏了三天而已，自己懒）我自己也是新人，如果有哪里说的不对的话，希望大家能够留言批评纠正，谢谢大家！（虽然没有几个人看）言归正传,今天说说各种宽高，和各种距离1样式宽/高（ style.width/style.height）同时说明，这个值通过document.getElementById("id").style.width
复制链接

扫一扫

专栏目录