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. gdb中run出现的Missing separate debuginfos, use: debuginfo-install XXX

    问题: Missing separate debuginfos, use: debuginfo-install glib 解决方法: 1.将/etc/yum.repo.d/CentOS-Debugin ...

  2. [Linux] Linux系统（登陆、退出、修密码）

    登录linux系统,就是输入用户名,密码,回车就可以了 修改密码 使用命令passwd,输入新密码和确认密码,密码的规则要求较严,多试几次 使用命令whoami,查看当前用户信息 使用命令users或 ...

  3. TCP三次握手是什么？为什么要进行三次握手？两次，四次握手可以吗？

    1.第一次握手,发送SYN报文,传达信息:“你好,我想建立连接”: 第二次握手,回传SYN+ACK报文,传达信息:“好的,可以建立链接”:    第三次握手,回传ACK报文,传到信息:“好的,我知道了 ...

  4. 【转】jquery checkbox勾选/取消勾选的诡异问题

    转:http://www.cnblogs.com/KeenLeung/p/3799895.html 第一次执行,没问题,但第二次执行就有问题了,选择不了 prop()和attr()区别: (来源:ht ...

  5. SpringBoot(三) Core Features: External Configuration(配置文件)

    码云: external-configuration 可以使用属性文件,YAML文件,环境变量和命令行参数来外部化配置 一.属性值可以直接注入到bean 系统属性值不可以 // application ...

  6. 宜立方商城中，mvn报错'dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: org.springframework:spring-webmvc:jar报错

    'dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: org.springframework:s ...

  7. Hive可视化工具

    目前市面上的Hive可视化客户端工具,大都是C/S模式的,安装使用都不是太方便,目前有一款基于WEB的可视化工具TreeSoft,通过浏览器就可以访问使用了,并且可以同时管理.维护.监控MySQL,O ...

  8. JDBC程序优化--提取配置信息放到属性文件中

    JDBC程序优化--提取配置信息放到属性文件中 此处仅仅优化JDBC连接部分,代码如下: public class ConnectionFactory { private static String ...

  9. java集合(List集合与Map集合的数据转换)

    List集合与Map集合的数据转换 实现List和Map数据的转换. 具体要求如下: 功能1:定义方法public void listToMap( ){ }将List中Student元素封装到Map中 ...

  10. bzoj P3309 DZY Loves Math——solution

    对于正整数n,定义f(n)为n所含质因子的最大幂指数.例如f(1960)=f(2^3 * 5^1 * 7^2)=3, f(10007)=1, f(1)=0.给定正整数a,b,求: $$\sum_{i= ...