<!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. 搭建高可用mongodb集群（一）——mongodb配置主从模式

    转载自:LANCEYAN.COM 在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQ ...

  2. JS中的回收机制

    js的设计者为了让没有必要的变量保存在内存中,(我们写的任何变量都是需要内存空间的),什么叫没有必要的变量?也就是说你不在需要这个变量的时候它就会被销毁?那么你肯定会问js怎么知道那些变量是我们不需要 ...

  3. Objective-C Composite Objects

    We can create subclass within a class cluster that defines a class that embeds within it an object. ...

  4. nconf修改密码

    修改nconf登录界面密码 [root@Cnyunwei config]# vi .file_accounts.php <?php/*## User/Password file for simp ...

  5. 三行命令搞定查询Python安装目录

    想为Python添加一个库文件到默认目录,却忘记了Python安装目录. 其实,只要用下面三行命令,就可以轻松得到Python安装路径了. 进入Python >>>import sy ...

  6. JMeter3.2入门使用教程

    JMeter3.2入门使用教程 背景说明 1.1. 背景简介 JMeter是Apache软件基金会下的一个开源项目,纯java开发的应用工具,可以作为进行负载和压力测试的工具来使用.从最开始时被设计成 ...

  7. PHP开发基础视频教程

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

  8. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter 'userId' not found. Available parameters are [arg1, arg0, param1, param2]

    2018-06-27 16:43:45.552  INFO 16932 --- [nio-8081-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : ...

  9. NYOJ-06-喷水装置（一）

    http://acm.nyist.net/JudgeOnline/problem.php?pid=6 喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现有 ...

  10. 连接器前置挂载U盾

    连接器前置挂载U盾 1. 宿主机配置及其信息 虚拟化软件版本 主机名 宿主机IP 账号及其密码 WorkStation windows idca- vm01 172.16.6.30 * Qemu-kv ...