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

  

js 中与元素有关的高度的更多相关文章

  1. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  2. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  3. 在Js中得到元素的子元素集合注意事项

    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...

  4. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  5. js中选定元素slice()

    选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...

  6. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  7. js中获取浏览器和屏幕高度

    Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  8. js中数组元素的添加和删除

    js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...

  9. JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别

    Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签:   1 g ...

随机推荐

  1. 关于ssh_copy_id脚本解析

    [oldgirl@module ~]$ more /usr/bin/ssh-copy-id #!/bin/sh # Shell script to install your public key on ...

  2. (转)如何学习Java技术?谈Java学习之路

    51CTO编者注:这篇文章已经是有数年“网龄”的老文,不过在今天看来仍然经典.如何学习Java?本篇文章可以说也是面对编程初学者的一篇指导文章,其中对于如何学习Java的步骤的介绍,很多也适用于开发领 ...

  3. 在Ubuntu上安装有道词典

    4月20日,由有道词典和Deepin团队共同完成的有道词典Linux版终于上线了,首先 推出Deepin和Ubuntu两个系统版本及其他版本的二进制包,估计以后还会有RPM 等版本.有道Linux版界 ...

  4. vim如何配置go语言环境

    go语言没有如source insight般优秀的编辑器,试用了多种,vim算最好的,其次可以用liteide(有反查变量函数引用点.修改行变色功能),两者可配合使用. 更新:最好的是idea+go插 ...

  5. Card Flip

    卡牌效果:O(∩_∩)O,只做了webkit浏览器的效果,请用chrome~ 1.首先呢,先用一个框框把卡牌包住,然后呢,搞两个子元素作为卡牌正反面.当然咯,反面是看不见滴~ <section ...

  6. ClientScript.RegisterStartupScript 不起作用

    asp.net webform 使用 ClientScript.RegisterStartupScript 不起作用 form 加上 runat="server",ok

  7. 170105、MySQL 性能优化的最佳 20+ 条经验

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  8. angular_ui-router ——依赖注入

    Angularjs ui-router - 组件: $state / $stateProvider:管理状态定义.当前状态和状态转换.包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更 ...

  9. cf 712E Memory and Casinos

    题意:有一行$n(n \leq 100000)$个方格,从左往右第$i$个方格的值为$p_i(p_i = \frac{a}{b}, 1 \leq a < b \leq 1e9)$,有两种操作,一 ...

  10. bash中使用mysql中的update命令

    mysql -uroot -ppasswd -e "update tbadmin set sPassword ='************' where sUserName='admin'& ...