offsetWidth  //返回盒模型的宽度（包括width+左右padding+左右border）

<style>

#div1 { width:200px; height:200px; border:2px solid red; padding:5px; margin:1px; background:green;}

</style>

<div id="div1"></div>

以上div1的offsetWidth为width+2*padding+2*border=200+2*5+2*2=214px

ps：offsetLeft = left+margin-left

offsetTop = top+margin-top

js中的offsetWidth用法的更多相关文章

  1. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  2. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  3. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  4. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  5. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  6. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  7. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

  8. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  9. JS中$含义和用法

    原博客:https://www.cnblogs.com/jokerjason/p/7404649.html$在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一 ...

随机推荐

  1. IDEA maven 配置，运行比较慢，加截本地仓库资源数据

    在 Runner 配置了参数: -DarchetypeCatalog=internal

  2. spring mvc 数据校验（bean实体注解实现）

    spring mvc 数据校验 1.添加个jar (jar与一版本会冲突) <dependency> <groupId>com.fasterxml</groupId> ...

  3. Oracle的分页和MySQL的分页

    Oracle的分页: select * from ( select rownum r,a from tabName where rownum <= 20 ) where r > 10 使用 ...

  4. JSP实现大文件上传和下载

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  5. 2017乌鲁木齐网络赛 J题 Our Journey of Dalian Ends ( 最小费用最大流 )

    题目链接 题意 : 给出一副图,大连是起点,终点是西安,要求你求出从起点到终点且经过中转点上海的最小花费是多少? 分析 : 最短路是最小费用最大流的一个特例,所以有些包含中转限制或者经过点次数有限制的 ...

  6. PHPExcel组件编程spl_autoload_register

    E:\html\tproject\framework\modules\common\vendor\PHPExcel\Classes\PHPExcel.php <?php /** PHPExcel ...

  7. 【BZOJ4337】树的同构（树同构，哈希）

    题意: 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如果能够把树T1T ...

  8. Internet History, Technology, and Security（week6）——Technology: Transport Control Protocol(TCP)

    前言: 这周开始学习分层网络模型的第三层,传输层. Transport/Reliability: Transport Layer TCP层的目的是补偿IP层中可能出现的错误,并充分利用可用资源.由于I ...

  9. Android ListView焦点事件冲突问题与解决

    Android ListView对于单纯列表展示是很好用的,但是一旦牵扯到对listView进行操作就会遇到各种各样的问题.比如保存Checkbox状态与item复用的冲突.遇到可获取焦点的控件比如说 ...

  10. es的调优

    3.1.分片查询方式 当前的图片中有5个主分片,5个副本:这对于es的集群来说,这种配置是非常常见的: 但是问题来了,当我们的客户端做查询的时候,程序会向主分片发送请求还是副本发送请求? 还是说直接去 ...