<!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. java 设计模式 之 桥梁模式

    桥梁模式:将抽象和实现解耦,使两者可以独立的变化.解释:将两个有组合关系,强耦合的对象,各自抽象然后解耦.(类关系图看https://www.cnblogs.com/blogxiao/p/951388 ...

  2. rm和mv和dirname和查看文件的命令

    rm -f -i -r ############################ mv -f -i -u 比较新旧 ########################### basename   获取文 ...

  3. 再用python写一个文本处理的东东

    朋友遇到一点麻烦,我自告奋勇帮忙.事情是这样的: - 他们的业务系统中,数据来自一个邮箱: - 每一个邮件包含一条记录: - 这些记录是纯文本的,字段之间由一些特殊字符分隔: - 他们需要从邮箱中批量 ...

  4. SQL 转换函数

    1.字符串与字符串相加 字符串相加   得到的是拼接成一列的字符串类型 例如 select name+code from car       name是nvarchar  code也是nvarchar ...

  5. jquery分页组件(每页显示多少条)

    /** * 功能说明:jPager 分页插件 * 参数说明:pages:[] 分页的控件个数 @id:显示分页的div ID,@showSelectPage: 是否显示当前分页的条目过滤下拉框 * @ ...

  6. 添加 SSH 公钥

    生成 SSH 密钥 ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM" 获取 SSH 公钥信息 cat ~/.ssh/id_rsa.pu ...

  7. javascript基本数据类型问题汇总

    isNaN()检测是否是NaN: 比较浮点相等,用绝对值,是否小于某一个阈值 Math.abs(1/3 - (1-2/3))<0.0000001: 字符串多行显示\n,ES6中使用反引号``: ...

  8. 在行列都排好序的矩阵中找数 【题目】 给定一个有N*M的整型矩阵matrix和一个整数K， matrix的每一行和每一 列都是排好序的。实现一个函数，判断K 是否在matrix中。 例如： 0 1 2 5 2 3 4 7 4 4 4 8 5 7 7 9 如果K为7，返回true；如果K为6，返 回false。 【要求】 时间复杂度为O(N+M)，额外空间复杂度为O(1)。

    从对角考虑 package my_basic.class_3; /** * 从对角开始 */ public class Code_09_FindNumInSortedMatrix { public s ...

  9. Luogu P1782 旅行商的背包

    题目传送门 卡常背包果然名不虚传 算法主体就是两种背包分开跑,先跑多重背包,再跑奇货 不知道为什么,这题二进制拆分好像要比单调队列优化快一些 然后这题毒瘤的地方就出来了: 如果一件物品的体积\(\ti ...

  10. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...