offsetWidth与offsetHeight
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的(译者注：各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。
offsetHeight属性与offsetWidth类似。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width' />
<style>
html,
body {
margin: 0;
padding: 0;
height: 1000px; } #div1{
width:200px;
height:200px;
background-color:purple; }
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
setInterval(function(){
oDiv.style.width=oDiv.offsetWidth-1+'px';
},30)
}
</script>
</head> <body>
<div id='div1'></div> </body> </html>
div增加一段border样式后：
border:1px solid black;
刷新页面：
offsetWidth与offsetHeight的更多相关文章
- javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别
javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
- JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight的用法
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- offsetWidth，offsetHeight到底该如何理解？
1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...
- offsetTop offsetLeft offsetWidth offsetHeight
document // Html 的容器对象. document.documentElement //html 对象 document.body // body 对象 $(document.docum ...
- 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth
深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...
随机推荐
- Oracle使用技巧
Edit/Undo Ctrl+ZEdit/Redo Shift+Ctrl+ZEdit/PL/SQL Beautifier Ctrl+W (自定义) Shift+Home 选择光标位置到行首 Shift ...
- 程序员的“三十而已”，你都30岁了，不会还在XXX吧？
一部<三十而已>火了 太太们的包包鄙视链出圈了 有人的地方就有江湖 是的,程序员入圈是容易的 不需要4万的LV,更不需要限量版的爱马仕 只需要一件耐躁的格子衫 然而,程序员的30岁, 却说 ...
- 【Luogu】P4381 [IOI2008]Island
一.题目 Description 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时, ...
- spring boot:使用poi导出excel电子表格文件(spring boot 2.3.1)
一,什么是poi? 1,poi poi是用来兼容微软文档格式的java api, 它是apache的顶级项目之一, 也是我们在生产环境中导出excel时使用最多的库 2,poi官方网站: http:/ ...
- linux(centos8):centos8.1安装(详细过程/图解)(vmware fusion/CentOS-8.1.1911-x86_64)
一,centos是什么? CentOS(Community Enterprise Operating System,中文意思是社区企业操作系统)是Linux发行版之一, 它是来自于Red Hat En ...
- 五分钟详解MySQL并发控制及事务原理
在如今互联网业务中使用范围最广的数据库无疑还是关系型数据库MySQL,之所以用"还是"这个词,是因为最近几年国内数据库领域也取得了一些长足进步,例如以TIDB.OceanBase等 ...
- jdk可视化工具系列——检视阅读
jdk可视化工具系列--检视阅读 参考 java虚拟机系列 RednaxelaFX知乎问答 RednaxelaFX博客 JConsole--Java监视与管理控制台 jconsole介绍 JConso ...
- 【应用程序见解 Application Insights】在Application Insights中通过自定义查询结果定义指标并显示在Dashboard中
问题情形 通过Application Insights收集到指标数据后,如Request,Trace,Exception.但是默认的Insights图表不能满足业务的需求,需要自定义相应的类SQL语句 ...
- SpringMVC异常的处理机制
SpringMVC异常的处理机制 处理流程图 其本质还是把异常交给SpringMVC框架来处理 系统的dao.service.controller出现异常都通过throws Exception向上抛出 ...
- GDB常用调试命令（一）
GDB是UNIX及UNIX-like下的调试工具,通常gdb使用前置条件:编译时加入debug信息,这里指的是C++. gcc/g++调试选项 gcc/g++是在编译时加入-g,-g分4个等级: ...