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极为重 ...
随机推荐
- gRPC 的 RoadMap 20151022 更新
gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众多开发 ...
- node、npm的安装和环境变量的配置
在使用node过程中踩过好几次坑,这次记录下来,以防以后在掉下去. 用npm安装nrm模块后,输入nrm 提示 “nrm”不是内部或外部命令,也不是可运行的程序.我就奇怪了,安装成功了,怎么还提示不是 ...
- js-权威指南学习笔记10
第十章 正则表达式的模式匹配 1.正则表达式是一个描述字符模式的对象. 2.可以使用RegExp()构造函数来创建RegExp对象,不过RegExp对象更多是通过一种特殊的直接量语法来创建. 3.程序 ...
- CSS属性之border
css的border属性相信大家都不陌生了,就是给元素加个边框嘛,在不同的盒模型下,会给元素的宽高带来怎样的影响,相信大家也都很熟悉了,这里就不再赘述,只说说大家平时没有怎么留意的东西. 0.bord ...
- angular2 如何使用websocket
1.npm下载: npm install angular2-websocket 2.需要在哪个组件使用就在那里引入: import {$WebSocket} from 'angular2-websoc ...
- 多线程下载英文Google地图
1. pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...
- 专访周金可：我们更倾向于Greenplum来解决数据倾斜的问题
周金可,就职于听云,维护MySQL和GreenPlum的正常运行,以及调研适合听云业务场景的数据库技术方案. 听云周金可 9月24日,周金可将参加在北京举办的线下活动,并做主题为<GreenPl ...
- Pwn with File结构体（四）
前言 前面几篇文章说道,glibc 2.24 对 vtable 做了检测,导致我们不能通过伪造 vtable 来执行代码.今天逛 twitter 时看到了一篇通过绕过 对vtable 的检测 来执行代 ...
- @transient加在属性前的作用
我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过程,只要这个类实现了Serilizable ...
- Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...