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. dockerfile关键字

    DockerFile关键字(保留字指令) FORM:基础镜像,表明当前镜像是基于那么镜像的 MAINTAINER :镜像维护者的名字和邮箱地址 RUN:容器构建时需要用到的命令 EXPOSE:当前容器 ...

  2. CyclicBarrier原来是这样的

    上一篇聊了一下Semaphore信号灯的用法及源码,这一篇来聊一下CyclicBarrier的用法及解析. 官网解释: 允许一组线程全部等待彼此达到共同屏障点的同步辅助.循环阻塞在涉及固定大小的线程方 ...

  3. pytest文档44-allure.dynamic动态生成用例标题

    前言 pytest 结合 allure 描述用例的时候我们一般使用 @allure.title 和 @allure.description 描述测试用例的标题和详情. 在用例里面也可以动态更新标题和详 ...

  4. mysql8在生产环境中的配置

    一,配置文件的位置 [root@yjweb ~]# ll /etc/my.cnf -rw-r--r-- 1 root root 935 Mar 11 16:52 /etc/my.cnf 说明:通常我们 ...

  5. selenium---输入内容后搜索

    from time import sleep from selenium import webdriver br = webdriver.Chrome() url = "https://ww ...

  6. docker-docker-compose 安装

    1.安装docker-compose(官网:https://github.com/docker/compose/releases) 安装: curl -L https://github.com/doc ...

  7. Linux文件系统和管理-1文件系统目录

    文件系统目录结构 Linux常见目录及用途 bin binary 放的是二进制程序 /usr/bin 和这是同一回事 bin -> usr/bin /bin是 /usr/bin的快捷方式 boo ...

  8. 【线上排查实战】AOP切面执行顺序你真的了解吗

    前言 忙,是我这个月的主旋律,也是我频繁鸽文章的接口----蛮三刀把刀 公司这两个月启动了全新的项目,项目排期满满当当,不过该学习还是要学习.这不,给公司搭项目的时候,踩到了一个Spring AOP的 ...

  9. Spring之IOC/DI(反转控制/依赖注入)_入门Demo

    在平时的java应用开发中,我们要实现某一个功能或者说是完成某个业务逻辑时至少需要两个或以上的对象来协作完成,在没有使用Spring的时候,每个对象在需要使用他的合作对象时,自己均要使用像new ob ...

  10. sentinel控制台与应用通信原理

    1,应用程序配置中的port选项用于指定在应用端启动的http server的端口,默认8719 sentinel: transport: dashboard: localhost:8080 port ...