<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 100px;

            height: 100px;

            padding: 10px;

            border: 10px solid #000;

            margin: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="box"></div>

<script>

    var div = document.getElementsByTagName("div")[0];

    //offsetHeight和offsetWidth: 可以检测盒子的宽高。

    //包括宽高本身，padding，border。不包括margin

    //offsetHeight = height+padding+border;(不加margin)

    //offsetWidth = width+padding+border;(不加margin)

    console.log(div.offsetHeight);

    console.log(typeof div.offsetHeight);   //number

</script>

</body>

</html>

　　

01-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

    HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度.一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(b ...

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

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

  9. offsetTop offsetLeft offsetWidth offsetHeight

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

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

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

随机推荐

  1. (转)VIM 一键自动添加文件头注释

    通过修改VIM的配置文件.vimrc可以让Vim(gvim)支持自动添加作者信息,具体代码如下: "进行版权声明的设置 "添加或更新头 map <F4> :call T ...

  2. [windows]桌面中添加我的电脑，我的文档和网上邻居图标

    xp系统: 操作步骤:桌面任意位置--〉右键--〉属性--〉桌面选项卡--〉自定义桌面--〉常规:勾选相关图标确定即可. win7系统: 操作步骤:桌面任意位置--〉右键--〉个性化--〉(右侧)更改 ...

  3. LeetCode 3Sum Closest 最近似的3sum（2sum方法）

    题意:找到最接近target的3个元素之和,并返回该和. 思路:用2个指针,时间复杂度O(n^2). int threeSumClosest(vector<int>& nums, ...

  4. 【iOS】UITableview cell 顶部空白的n种设置方法

    我知道没人会主动设置这个东西,但是大家一定都遇到过这个问题,下面总结下可能是哪些情况: 1, self.automaticallyAdjustsScrollViewInsets = NO;  这个应该 ...

  5. uiviewcontroller 键盘不遮挡信息

    //添加监听事件 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow: ...

  6. 更新Svn客户端后，右键菜单中没有TortoiseSVN

    环境: OS:                 Windows XP sp3 升级后SVNServer:    VisualSVN Server 2.7.3 升级后SVNClient:    小乌龟: ...

  7. JS计算两个日期时间差，天 小时 分 秒格式

    function diffTime(startDate,endDate) { startDate= new Date(startDate); endDate = new Date(endDate); ...

  8. 模板类 vector

    概要 介绍一下模板类 vector 的常用操作,以及一个应用举例,顺时针打印矩阵.   基本定义 模板类 vector 是一种动态数组,它是使用 new 创建动态数组的替代品,实际上,vector 也 ...

  9. [Android 测试] 压力稳定性测试之: Monkey 详解分析脚本(转载)

    一.什么是稳定性测试? 通过随机点击屏幕一段时间,看看app会不会奔溃,能不能维持正常运行. 二. Money是什么? Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模 ...

  10. pytorch中的view

    https://ptorch.com/news/59.html view()相当于reshape(),其中参数若为-1表示当前的size根据其余size推断