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
js 中与元素有关的高度的更多相关文章
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- 在Js中得到元素的子元素集合注意事项
http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- js中选定元素slice()
选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...
- (知识点)JS中获取元素的样式
首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...
- js中获取浏览器和屏幕高度
Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- js中数组元素的添加和删除
js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...
- JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签: 1 g ...
随机推荐
- Centos 7 mysql Buffered warning: Changed limits: max_connections: 214 解决方法
Everytime I restart MySQL I have this warning: [Warning] Buffered warning: Changed limits: max_conne ...
- SWFUpload
引用:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非 ...
- centos安装mono
1.查看mono最新版本 http://download.mono-project.com/sources/mono 2.安装依赖环境 sudo yum install cmake automake ...
- Onvif设备Rtsp地址解析和播放
今天把Onvif搜索以及Rtsp流这一块的功能集成了下, 主要包含以下功能: 1. onvif设备的搜索 2. 设备rtsp地址的解析 3. Rtsp流的播放 4. 建立Rtsp流服务器, 使用vlc ...
- JS SDK 随手笔记
JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...
- Masonry 创建Button的简单使用
代码创建控制器,控件在实际开发中很实用,方便快捷,而Masonry第三方框架更是将代码创建效率提高了很多! 如何代码创建?如何使用第三方框架? 1.首先删除系统自带的SB,详见下图 2.在AppDel ...
- Spring学习笔记之二----基于XML的Spring AOP配置
在Spring配置文件中,通常使用<aop:config>元素来设置AOP,其中应包括: <aop:aspect>指定aspect,aspect是一个POJO类,包含了很多的a ...
- Mysql索引的类型和优缺点
索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.注:[1]索引不是万能的!索引可以加快数据检索操作,但会使数据修改操作变慢.每修改数据 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- mybatis使用generator生成对应的model、mapping配置文件、dao
http://blog.csdn.net/fengshizty/article/details/43086833 使用时 补充 输入命令:cd d:\generator 敲回车 再输入命令:d: 敲 ...