js 中与元素有关的高度

1, 平常都经常用 document.documentElement.clientWidth 或 document.documentElement.clientHeight 来获取页面的宽度和高度, 其实任何一个元素都有clientWidth 和clientHeight 属性,它的值等于,元素的宽度或高度+ padding的值,如果有滚动条,还要减去滚动条的宽度和高度。 比如一个div

  1, 如果设置一个div 的宽度和高度,里面只有很少内容没有出现滚动条,那么这个div的clientWidth 和clientHeight 就是我们设置的width 和height。

<style>
  div {
	width: 300px;
	height: 100px;
	border: 1px solid blue;
	font: 30px arial;
  }
</style>
<div>
    clientHeight/ clientWidth
</div>
<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.clientHeight);  // 100   同style样式中设置的一致
  console.log(div.clientWidth);  //  300   同style样式中设置的一致
</script>

  2, 如果同时给div元素设置了padding值, 那么div的clientWidth 和clientHeight就时 width + padding  和height + padding。

<style>
	div {
		width: 300px;
		height: 100px;
		padding: 20px;  /*增加了padding 20px*/
		border: 1px solid blue;
		font: 30px arial;
	}
</style>

console.log(div.clientHeight);  // 140  width + padding *2
console.log(div.clientWidth);  //  340  height + padding *2

  3, 如果给div 设置overflow: auto,同时里面的内容特别多,出现滚动条, 这是clientWidth 和clientHeight就时 width + padding -滚动条的宽度  和height + padding-滚动条的高度。

<style>
	div {
		width: 300px;
		height: 100px;
		padding: 20px; /*增加了padding 20px*/
		border: 1px solid blue;
		font: 30px arial;
		overflow: auto;
	}
</style>

<div>
	clientHeight/ clientWidth/clientHeight/ clientWidth
	clientHeight/ clientWidth/clientHeight/ clientWidth
	clientHeight/ clientWidth/clientHeight/ clientWidth
	clientHeight/ clientWidth
</div>
<script>
	var div = document.getElementsByTagName("div")[0];
	console.log(div.clientHeight);  // 123   width + padding *2 -滚动条的高度
	console.log(div.clientWidth);  // 323    height + padding *2 -滚动条的宽度
    // 滚动条的默认宽度和高度是17px;
</script>

  4, clientLeft/ clientTop: 他们指的是div 元素border 的宽度。 clientLeft 指的是border-left-width,clientTop 指的是 border-top-width;

div {
	width: 300px;
	height: 100px;
        border-style: solid;
        border-width: 30px 20px 10px 5px;
}    

console.log(div.clientTop);  //  30
console.log(div.clientLeft);  //  5

  

上一篇:CSS知识图--转载


下一篇:[Liferay6.2]Liferay Dynamic Query API示例