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 ...
随机推荐
- centos 7.0 更改启动环境/启动进入图形界面/命令行模式
当前我桌面模式 systemctl set-default multi-user.target ln -sf /lib/systemd/system/multi-user.target /etc/sy ...
- List<String>转换为实体类的属性【转】
package model; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.util.Arr ...
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
- 如何在construct3上开发游戏&游戏展示
前言 为了更快体验做出游戏的快乐,我们可以直接采用construct3 提供的游戏模板.这里我用的是基础模板中的塔防游戏.我们在这个的基础上加进来"植物大战僵尸"的一些元素,包括内 ...
- CentOS 8 Yum安装ansible
ansible的安装 直接yum安装ansible会报错,需要先安装epel源. ansible的安装来源于epel仓库,因此在安装前需确保安装了正确的epel源. yum install -y ep ...
- 如何理解码分复用中的码分多址CDMA？
如何理解CDMA? 推荐参考大神文章 https://blog.csdn.net/dog250/article/details/6420427 (码分多址(CDMA)的本质-正交之美) 首先我们先看& ...
- docker启动redis并设置密码
docker启动redis并设置密码: docker run -d --name redis -p 6379:6379 redis --requirepass "password" ...
- 手撸了一个HTTP框架：支持Sprng MVC、IOC、AOP，拦截器，配置文件读取...
https://github.com/Snailclimb/jsoncat :仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架 距离上一次给小伙伴们汇报简易 ...
- 拿了十几个offer，怎样做选择？
本文已经收录至我的GitHub,欢迎大家踊跃star 和 issues. https://github.com/midou-tech/articles 最近收到好几个读者的咨询,关于如何选offer的 ...
- PHP对接微信扫码登录
1.PC端扫码登录 如果你将微信小程序和公众账号绑定同一个微信开放平台,那么他们各自的接口返回有一个参数unionid是相同的(没有绑定微信公众账号就没有):那么你就可以使用这个unionid来做业务 ...