<!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. sizeof()用法汇总 zhuan

    sizeof()功能:计算数据空间的字节数1.与strlen()比较      strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素.       ...

  2. sql创建作业--自动执行存储过程

    创建自动执行存储过程: 1.创建参数 2.删除已有同名的作业 3. 创建作业 4.创建作业步骤 5.连接服务器 6.创建作业调度 7.启动作业 ALTER PROCEDURE dbo.sx_pro_A ...

  3. POJ 1739 Tony's Tour （插头DP，轮廓线DP）

    题意:给一个n*m的矩阵,其中#是障碍格子,其他则是必走的格子,问从左下角的格子走到右下角的格子有多少种方式. 思路: 注意有可能答案是0,就是障碍格子阻挡住了去路. 插头DP有两种比较常见的表示连通 ...

  4. PHP开发基础视频教程

    PHP现今作为互联网运用很广泛的编程语言,市场需求量也越来越高,而PHP开发工程师的薪资也是一路水涨船高,更多的人看到了PHP的发展前景,纷纷都想投入到PHP的开发大军中来,那么对于很多转行或者零基础 ...

  5. poj2312Battle City BFS

    题意: M行N列矩阵, 'Y'表示开始位置, 'T'表示目标位置, 从开始位置到目标位置至少需要走多少步,其中, 'S', 'R'表示不能走, 'B' 花费为2, 'E'花费为1. 思路:纯 BFS. ...

  6. Dockerfile优化建议

    1. 减少镜像层 一次RUN指令形成新的一层,尽量Shell命令都写在一行,减少镜像层. 2. 优化镜像大小:清理无用数据 一次RUN形成新的一层,如果没有在同一层删除,无论文件是否最后删除,都会带到 ...

  7. applicationContext.xml重要配置

    <!-- 加载 hibernate.properties 文件--> <bean id="propertyConfig" class="org.spri ...

  8. path.join()与path.resolve()区别

    1.path.resolve([...paths]) path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径. 给定的路径的序列是从右往左被处理的,后面每个 path 被依次 ...

  9. logstash-基础操作

    一.环境 https://www.cnblogs.com/suffergtf/p/9566145.html 1.收取日志文件到elasticsearch [root@linux-node1 logst ...

  10. js解析器

    1>js的预解析 找var function 参数等 所有的变量,在正式运行代码前,都提前赋了一个值:未定义 所有的函数,在正式运行代码前,都是整个函数块. 遇到重名的:只留一个 如果变量与函数 ...