JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。
返回了元素大小，但没有单位，默认单位是 px，如果你强行设置了单位，比如 100em之类，它还是会返回 px 的大小。(CSS 获取的话，是照着你设置的样式获取)。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.clientWidth); //
alert(box.clientHeight); //
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
对于元素的实际大小，clientWidth 和 clientHeight 理解方式如下：
1.增加边框，无变化，为 200；
2.增加外边距，无变化，为 200；
3.增加滚动条，最终值等于原本大小减去滚动条的大小，为 184；
4.增加内边距，最终值等于原本大小加上内边距的大小，为 220；
如果说没有设置任何 CSS 的宽和高度， IE 6,7,8浏览器则返回 0。那么其他 浏览器会算上滚动条和内边距的计算后的大小。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.clientWidth); //220 加上了内边距
alert(box.clientHeight); //220 加上了内边距
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
border:20px solid red;
margin:30px;
padding:10px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
二、scrollWidth 和 scrollHeight
这组属性可以获取滚动内容的元素大小。
返回了元素大小，默认单位是 px。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.scrollWidth); //
alert(box.scrollWidth); //
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
如果没有设置任何 CSS 的宽和高度，它会得到计算后的宽度和高度。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.scrollWidth); //
alert(box.scrollWidth); //
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
对于元素的实际大小，scrollWidth 和 scrollHeight 理解如下:
1.增加边框，不同浏览器有不同解释：
a) Firefox 和 Opera 浏览器会增加边框的大小
b) IE、Chrome 和 Safari 浏览器会忽略边框大小
c) IE 浏览器只显示它本来内容的高度
2.增加内边距，最终值会等于原本大小加上内边距大小
3.增加滚动条，最终值会等于原本大小减去滚动条大小
4.增加外边据，无变化。
5.增加内容溢出，Firefox、Chrome 和 IE 获取实际内容高度，Opera 比前三个浏览器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。
三、offsetWidth 和 offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetWidth); //
alert(box.offsetHeight); //
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
border:10px solid red;
padding:10px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
如果没有设置任何 CSS 的宽和高度，他会得到计算后的宽度和高度即默认的宽度和高度。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetWidth); //
alert(box.offsetHeight); //18，火狐20
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
对于元素的实际大小，offsetWidth 和 offsetHeight 理解如下：
1.增加边框，最终值会等于原本大小加上边框大小，为 220；
2.增加内边距，最终值会等于原本大小加上内边距大小，为 220；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
对于元素大小的获取，一般是块级(block)元素并且以设置了 CSS 大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦
JavaScript的DOM操作获取元素实际大小的更多相关文章
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
随机推荐
- SQL查询几种的区别。
最近看了几篇SQL查询的文章做一下总结哦,大概简记如下: SQL查询的实质是,是指从数据库中取得数据的子集,可以先取列子集,然后再取符合条件的行子集. 1.单表查询: SELECT [Name] ,[ ...
- nuget.org 无法加载源 https://api.nuget.org/v3/index.json 的服务索引
今天添加新项目想添加几个工具包,打开NuGet就这样了 发生错误如下: [nuget.org] 无法加载源 https://api.nuget.org/v3/index.json 的服务索引. 响应 ...
- 微信小程序: 编译.wxss文件错误解决
博主最近又重新开始捡起微信小程序,想做点自己的东西.了解到最近小程序工具有做更新,就顺手更新了最新的版本,功能比之前强大了不少! 更新归更新,更新后控制台就一直报下面这个错误: 解决办法 有问题总 ...
- [日常] json_encode对中文和引号的处理差异研究
json_encode()1.默认就是把所有 ASCII 可显示字符以外的统统转义为 Unicode如果把那些字符转义为 Unicode 之后,无论文件编码是否一致,都不会出现乱码,因此中文转成Uni ...
- Java基础之Object类
类Object是类层次结构的根类.每个类都直接或者间接地继承Object类.所有对象(包括数组)都实现这个类的方法.Object类中的构造方法只有一个,并且是无参构造方法,这说明每个类中默认的无参构造 ...
- Linux下的mysql默认大小写敏感
在Linux下: 1.数据库名与表名是严格区分大小写的: 2.表的别名是严格区分大小写的: 3.列名与列的别名在所有的情况下均是忽略大小写的: 4.变量名也是严格区分大小写的: 在Windows下: ...
- 有序的数据结构中：内存操作红黑树快，磁盘操作b+树快
红黑树常用于存储内存中的有序数据,增删很快,b+树常用于文件系统和数据库索引,因为b树的子节点大于红黑树,红黑树只能有2个子节点,b树子节点大于2,子节点树多这一特点保证了存储相同大小的数据,树的高度 ...
- Linux学习7-Linux常用命令（3）
文件处理命令 命令名称:touch 命令英文原意:touch 命令所在路径:/bin/touch 执行权限:所有用户 功能描述:创建空文件 语法:touch[文件名] 范例: $tou ...
- HTML学习笔记《一》 ---- HTML基本认识
HTML 基本认识 一.简介 1.HTML是超文本标记语言,标准通用标记语言下的一个应用,解释性语言. 2.“超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 3.超文本标记语言的 ...
- display none隐藏后如果表单有数值，那么他的数值还存在！
以前以为display:none后他的值就不存在了, display:none隐藏后如果表单有数值,那么他的数值还存在.(项目出了问题!!) <!DOCTYPE html PUBLIC &quo ...