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#基础学习(0703)之string.Format格式化日期
C# string.Format格式化日期 DateTime dt = ,,,,,,); string.Format("{0:y yy yyy yyyy}",dt); //17 1 ...
- Pivot
测试数据 Create Table TPivot ( ID ,), ProductName ), SalesMonth int, SalesCount int ) insert into TPivot ...
- shellExcute 与shellExcuteex 的一些东西
最近在做外部调用exe并传给exe相应参数 方法有两种.. 1,用program.start() 2,shell() 3,调用API 以下内容来自http://www.pinvoke.net/defa ...
- 【JavaScript 从零开始】变量作用域
变量作用域 一个变量的作用域(scope)是程序源代码中定义这个变量的区域. 全局变量拥有全局作用域,在JavaScript代码中的任何地方都是有定义的.然而在函数内声明的变量只是函数体内有定义. 他 ...
- 如何利用gulp构建前端自动化
1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...
- winform:对dataGridView绑定的泛型List<T> 的简单CRUD
创建对象类,为所有成员封装字段,然后重载该类: 根据已有的对象类(类型参数)创建一个长度可以变化的List数组,并绑定数据源: 设置dataGridView的column属性:对应四个对象类创建相 ...
- ORACLEserver实例DB的概念学习理解与总结【进阶一】
个人原创,转自请在文章开头显眼位置注明出处:https://www.cnblogs.com/sunshine5683/p/10048824.html 一.以后看一个oracleserver,可以使用如 ...
- ZAB 算法
ZAB (Zookeeper Atomic Broadcast ) zookeeper原子消息广播协议 保证:分布式数据一致性 所有事务请求必须由一个全局唯一的服务器来协调处理,这样的服务器被称为 ...
- Q：链表的中间元素
问题:如何得到一个链表的中间元素? 相信,这个问题对于刚入门编程的人来说,都不会难,最自然而然的想法是先遍历一遍链表,统计链表中的元素的个数,之后,再走一遍链表,所走的步长为链表长度的一半.这样就 ...
- 修改input被选中的默认样式
input:focus{ outline: none; border: 1px solid #fff; } 或者 input[type=text]:focus{ outline: n ...