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. ansible-初始playbook安装nginx

    1. ansible-初始playbook安装nginx 1) 创建一个ansible存放路径 1 [root@test-1 scripts]# mkdir -p /ansible/nginx/{co ...

  2. java9第5篇-Collection集合类的增强与优化

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  3. Golang 随机生成中国人姓名

    package main import ( "fmt" "math/rand" "time" ) var lastName = []stri ...

  4. centos8上redis5在生产环境的配置

    一,创建redis的数据和日志目录: [root@yjweb data]# mkdir /data/redis6379 [root@yjweb data]# mkdir /data/redis6379 ...

  5. 赋予楼宇“智慧大脑”：厦门双子塔3D可视化

    前言 今年10月7日,是国务院批准设立厦门经济特区40周年纪念日.1980年的这一天,国务院正式批复同意在厦门湖里地区划出一块2.5平方公里的土地,设立经济特区.厦门,成为中国最早设立的四个经济特区之 ...

  6. Redis入门之认识redis(一)

    第1章 非关系型数据库 1.1 NoSQL数据库概述 1) NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库. NoSQL 不 ...

  7. 【转】Centos7系统下忘记了root管理员账号密码的解决方式

    哎,事情的起因就是脑子背了,曾经还手贱把root密码改了,导致普通账户改不回管理员账号了,然而,这次是百毒"救"了我,最终完美修改了root密码,好文章特地转载过来了,侵权删. 原 ...

  8. Pytest学习（四） - fixture的使用

    前言 写这篇文章,整体还是比较坎坷的,我发现有知识断层,理解再整理写出来,还真的有些难. 作为java党硬磕Python,虽然对我而言是常事了(因为我比较爱折腾,哈哈),但这并不能影响我的热情. 执念 ...

  9. 【译】值得推荐的十大React Hook 库

    十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文作者:Juraj Pavlo ...

  10. robotframework执行UI自动化时不能运行谷歌浏览器的问题

    robotframework执行UI自动化时报错,查看日志显示Parent suite setup failed: Variable '${browser}' not found. Did you m ...