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. linux网卡驱动程序架构

    以cs89x0网卡驱动为例:

  2. Javascript判断数据类型的五种方式及其特殊性

    Javascript判断数据类型的五种方式及区别 @ 目录 typeof instanceof Object.prototype.toString isArray iisNaN ----------- ...

  3. python面试题-python相关

    1. __new__.__init__区别,如何实现单例模式,有什么优点 __new__是一个静态方法,__init__是一个实例方法 __new__返回一个创建的实例,__init__什么都不返回 ...

  4. LinkageSel无限级联动下拉菜单

    http://files.cnblogs.com/files/chenghu/LinkageSel-master.zip

  5. JS获取DropDownList选择项的值

    var dropDownList= document.getElementById("<%=DropDownListID.ClientID %>");//获取DropD ...

  6. 第十四章 nginx代理配置

    一.nginx代理 1.常见模式 1.常见模式:1)正向代理2)反向代理​2.区别1)区别在于形式上服务的"对象"不一样2)正向代理代理的对象是客户端,为客户端服务3)反向代理代理 ...

  7. MySQL 日志之 binlog 格式 → 关于 MySQL 默认隔离级别的探讨

    开心一刻 产品还没测试直接投入生产时,这尼玛... 背景问题 在讲 binlog 之前,我们先来回顾下主流关系型数据库的默认隔离级别,是默认隔离级别,不是事务有哪几种隔离级别,别会错题意了 1.Ora ...

  8. spring cloud gateway网关路由分配

    1, 基于父工程,新建一个模块 2,pom文件添加依赖 <dependencies> <dependency> <groupId>org.springframewo ...

  9. 自定义Jackson2HttpMessageConverter,适应.html后缀url

    Jackson2HttpMessageConverter 用处 SpringMVC中,controller中的方法返回java Bean对象,mvc将此对象转换成字符串 默认支持的mediaType: ...

  10. vue-cli3生产环境和开发环境路径的替换

    在根目录下创建两个文件,这样的好处在于不用手动去书写判断环境替换路径代码 .env.development(开发) .env.production(生产) 内容: 必须是VUE_APP前缀开头,这样w ...