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的更多相关文章

  1. javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别

    javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...

  2. clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

    clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...

  3. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  4. offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight

    w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...

  5. JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...

  6. offsetTop、offsetLeft、offsetWidth、offsetHeight的用法

    假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...

  7. offsetWidth，offsetHeight到底该如何理解？

    1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...

  8. offsetTop offsetLeft offsetWidth offsetHeight

    document // Html 的容器对象. document.documentElement //html 对象 document.body // body 对象 $(document.docum ...

  9. 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

    深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...

随机推荐

  1. C++单链表操作

    #include <stdio.h> typedef struct _Node{   int value;   _Node *next;}Node; void AddNodeTail(No ...

  2. GCC编译选项笔记

    警告选项 -Wall:开启大多数的警告信息 -Wextra:开启额外的警告信息,比如参数未使用警告(-Wunused-parameter) -Werror:将警告当作错误,中断编译 优化选项 -O,- ...

  3. mac 解决安卓模拟器链接不上网络

    方法1.临时方法,每次启动都要加114.114.114.114 1.进入到下面的目录 /Users/anxiaodong/Library/Android/sdk/emulator 2.执行以下命令 e ...

  4. Harbor 安装教程

    Harbor 安装教程 一. CentOS设置 1. 更换阿里源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com ...

  5. 对于某东平台XX娃娃的用户体验进行（严肃、限速）数据分析

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 本次的爬取目标是某东的一个商品,但从来没有用过,所以本人很好奇.我们就采集这 ...

  6. 面试官：说说CountDownLatch，CyclicBarrier，Semaphore的原理？

    CountDownLatch CountDownLatch适用于在多线程的场景需要等待所有子线程全部执行完毕之后再做操作的场景. 举个例子,早上部门开会,有人在上厕所,这时候需要等待所有人从厕所回来之 ...

  7. this()与super()

    1. 构造器中第一行默认是super(),一旦直接父类的构造器中没有无参的,那么必须显式调用父类的某个有参构造. 2. 构造器中第一行的super()可以换成this(),但是this()和super ...

  8. Lambda表达式（二）

    Lambda表达式是给函数式接口(SAM接口)的变量或形参赋值的表达式.Lambda表达式替代了原来使用匿名内部类的对象给函数式接口(SAM接口)的变量或形参赋值的形式. 匿名内部类:实现了这个接口, ...

  9. CTF-pwn:老板，来几道简单pwn

    wdb_2018_3rd_soEasy 保护全关 在栈上写入shellcode,然后ret2shellcode from pwn import * local = 0pa binary = " ...

  10. jq animate 的第二写法

    俩个参数的写法 例子: $('#div1').animate({num:'auto'},{ duration : 1000,   //运动时间 easing : 'linear',    //运动形式 ...