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. redis 开启AOF

    找到redis 安装目录 例如 cd /usr/local/redis 打开 redis.conf  修改以下参数: # vi /usr/local/redis/etc/redis.conf appe ...

  2. css实现中间横线俩边文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【Jenkins】active choices reactive parameter & Groovy Postbuild插件使用！

    注:以上俩插件安装下载直接去jenkins官网或者百度下载即可 一.active choices reactive parameter 插件的使用 1.被关联的参数不做改动 2.添加active ch ...

  4. day22 函数整理

    # 1.计算 年月日时分秒 于现在之间差了多少 格式化时间 # 现在 # 某一个年月日时分秒 参数 # import time # def get_time(old_t,fmt = '%Y-%m-%d ...

  5. 【水】怎么在 HZOI 上水到更高的分

    前言 这些东西在联赛并用不了 预编译优化 40行优化 #define _CRT_SECURE_NO_WARNINGS #pragma GCC optimize(2) #pragma GCC optim ...

  6. spring boot:配置druid数据库连接池(开启sql防火墙/使用log4j2做异步日志/spring boot 2.3.2)

    一,druid数据库连接池的功能? 1,Druid是阿里巴巴开发的号称为监控而生的数据库连接池 它的优点包括: 可以监控数据库访问性能 SQL执行日志 SQL防火墙 2,druid的官方站: http ...

  7. centos8平台使用loginctl管理登录用户与session

    一,loginctl的用途: 控制 systemd 登录管理器 管理当前登录的用户和session 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/a ...

  8. laravel重写

    laravel location / { try_files $uri $uri/ /index.php?$query_string; } ci location / { try_files $uri ...

  9. 第一章 数据库管理员（DBA）

    一.DBA的工作 1.初级:mysql基础安装.搭建 2.中级:数据库管理员DBA 1)用户管理 1.用户的权限2.用户可以操作的库或者表3.用户名和来源的主机4.用户的密码​grant all on ...

  10. 使用pyenv实现python多版本共存

    背景 如果是Ubuntu等桌面系统,都已经更新到了Python较新的版本.但多数生产环境使用的还是红帽系统. CentOS7默认还是Python2.7,而开发环境如果是高版本Python就带来了问题. ...