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操作获取元素实际大小的更多相关文章

  1. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  2. JavaScript的DOM操作获取元素周边大小

    一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...

  3. javascript的DOM操作获取元素

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  4. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  5. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  6. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  7. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

随机推荐

  1. mvc 提交Html内容的处理

    默认   方法1 [ValidateInput(false)] 这个方法会完全开放,对于有些字段允许,有些字段不允许的情况,是不会检测的   方法2 [AllowHtml] 此方法只有再使用Defau ...

  2. JavaScript学习笔记系列2:Dom操作(一)

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  3. 鼠标样式——css国际组织

    w3c国际标准组织提供的鼠标样式: http://css-cursor.techstream.org/

  4. 编译gRPC Go版本使用的 ProtoBuffer 文件

    本篇文章主要解决mac下安装ProtoBuffer,编译go版本gRPC用的.proto文件 安装 protoc 注意,gRPC 需要用到 proto3, 而目前 Release 的版本是 2.6.1 ...

  5. Gson 使用new TypeToken<List<String>>(){}.getType() 为什么有 {}？

    前言:使用 gson 时,不明白为什么有这种写法:new TypeToken<List<String>>(){}.getType(),所以来解惑.最终发现其实就是自己的 jav ...

  6. BZOJ1856: [Scoi2010]字符串(组合数)

    题意 题目链接 Sol \(30 \%\)dp: \(f[i][j]\)表示放了\(i\)个\(1\)和\(j\)个\(0\)的不合法方案 f[0][0] = 1; cin >> N &g ...

  7. jQuery基础（DOM篇，append()，after()，prepend()，insertAfter()，节点删除，遍历方法each()）

    1.DOM创建节点及节点属性   创建流程比较简单,大体如下:   - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法:   - 创建元素:d ...

  8. Windows win7下VMware Virtual Ethernet Adapter未识别网络解决方法

    win7下VMware Virtual Ethernet Adapter未识别网络解决方法[摘] by:授客 QQ:1033553122 问题描述 win7系统下安装VMware,查看网卡适配器设置, ...

  9. spring boot(16)-mail发邮件

    上一篇讲了如何处理异常,并且异常最终会写入日志.但是日志是写在服务器上的,我们无法及时知道.如果能够将异常发送到邮箱,我们可以在第一时间发现这个异常.当然,除此以外,还可以用来给用户发验证码以及各种离 ...

  10. nginx 的socket 选项处理--TCP_DEFER_ACCEPT

    在nginx listen配置项的说明中有一个选项: deferred -- indicates to use that postponed accept(2) on Linux with. the ...