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极为重 ...
随机推荐
- C# 使用/配置Log4Net
1.首先在项目中添加Nuget程序包... 2.然后在NuGet窗体中搜索Log4Net,然后点击安装<安装过程可能会持续几分钟,请耐心等待> 3.在项目中添加一个Config文件,如已有 ...
- [日常] DNS的迭代查询过程
DNS是应用层协议,端口号为tcp/53和udp/53 DNS查询过程,比如访问www.test.com1.客户机查询www.test.com2.查询首选DNS服务器,Linux下/etc/resol ...
- [javaSE] 网络编程（概述）
网络通信的步骤, 1.找到对方的ip 2.数据发送到对方指定的应用程序上,为了标识这些应用程序,用数字进行标识,这个数字就是端口 3.定义通信规则,这个规则就称为协议 国际组织定义了通用协议 TCP/ ...
- 【读】为什么BIO效率低下
原因: 假如有10000个连接,4核CPU ,那么bio 就需要一万个线程,而nio大概就需要5个线程(一个接收请求,四个处理请求).如果这10000个连接同时请求,那么bio就有10000个线程抢四 ...
- js中var与let
问题 for (var iii = 0; iii < 3; iii++) { setTimeout(function(){ console.debug(iii) }, 1000) let let ...
- 算法 - 排序数组中与x最近一点
条件: a[j] + a[j+1] < x*2 int findClosestPoint(int x,int a []) { int res = 0; int j = 0; while(j< ...
- Code Signal_练习题_All Longest Strings
Given an array of strings, return another array containing all of its longest strings. Example For i ...
- redis事务报错No ongoing transaction. Did you forget to call multi?
场景:需要存两条数据到redis中,并且两条要么都存要么都不存,需要事务来控制 Spring Data Redis的RedisTemplate提供了MULTI.EXEC命令进行封装,远看可以解决问题, ...
- JavaScript停止冒泡例子
<!DOCTYPE html><html><head><meta charset="utf-8"><title>qypt ...
- jQuery.when(deferreds)
有一天当我的上司问到我一个问题,两个或者多个ajax 同时运行,怎么去处理当它成功或者失败以后执行我想要的结果.我的第一反应就是if或者switch判断.其实不然jQuery已经有好的方案帮我们解决了 ...