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. Oracle超过连接数（ORA-12520）

    原因是超过了连接数,最有效的处理方法是关闭em服务,停止em服务,改成禁用. show parameter processes;  --查看允许连接情况 select count(*) from v$ ...

  2. golang使用graphviz

    graphviz的介绍请参考: http://www.cnblogs.com/ghj1976/p/4539788.html  安装 graphviz 需要在 http://www.graphviz.o ...

  3. DICOM简介

    背景: DICOM分为两大类(这里只是从DICOM相关从业者日常工作角度出发来分类的):1)DICOM医学图像处理,即DCM文件中具体数据的处理,说图像可能有些狭隘,广义上还包括波形(心电).视频(超 ...

  4. 转：Jquery如何获取某个元素前(后)的文本内容？

    原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...

  5. 镶嵌数据集 Mosaic Dataset 的常见数据组织方式

    镶嵌数据集是ESRI公司推出一种用于管理海量影像数据的数据模型,定义在GeoDatabase数据模型中. 它的常见数据组织方式有两种: 1. 源镶嵌数据集 Source Mosaic Dataset ...

  6. flutter实现（OutlineButton）线框按钮

    在flutter的控件里 常用按钮有:FlatButton,RaisedButton,FloatingActionButton,OutlineButton. FlatButton是扁平的,没有阴影的. ...

  7. Hive命令 参数

    1.hive -h     显示帮助 2.hive -h hiveserverhost -p port     连接远程hive服务器 3.hive --define a=1 --hivevar b= ...

  8. java 中解析json步骤

    一.   JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. Json建构于两种结构:     1.“名称/值”对的集合(A collection ...

  9. 【转】SSL协议详解

    作者:朱祁林 出处:http://zhuqil.cnblogs.com 原文链接 背景介绍    最近在看<密码学与网络安全>相关的书籍,这篇文章主要详细介绍一下著名的网络安全协议SSL. ...

  10. Vue2学习笔记:v-for指令

    1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...