<!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. 2013上半年中国CRM市场分析报告

    经过了十多年的风风雨雨,CRM度过了漫长的市场培育期,即将迎来成熟期.目前这一阶段也是CRM惨烈搏杀的一个阶段,据不完全统计,国内大大小小的CRM厂商已经超过600家,各厂商几度火拼,努力扩大自己在C ...

  2. AndroidStudio进行Build时出现DexArchiveMergerException异常的解决办法

    今天在AndroidStudio中导入了一个项目,编译的时候没有什么问题,但是在执行Rebuild Project 和 Build APK(s)时报错了,提示: Error:Execution fai ...

  3. 更改shell

    chsh -s /usr/local/bin/bash  #更改自己的shell为bash

  4. 安装Pywin32后无法正常引用pyd文件

    1. 首先在官方下载pywin32 2.下载完成后,无法正常引用pyd文件 3.解决方案: python安装目录\Lib\site-packages\pywin32_system32\* 至 C:\W ...

  5. Servlet和JSP之自定义标签学习

      此文章会讲述简单标签处理器,因为经典自定义标签处理器没有简单标签处理器方便使用,故在此不进行描述. 参考:慕课网的<JSP自定义标签>视频; <Servlet.JSP和Sprin ...

  6. activeandroid复制本地数据库问题总结

    activeandroid no such table 解决activeandroid no such table failed to read row 0 column 1 from a curso ...

  7. 安装linux虚拟机（Ubuntu & KALI）

    VMware workstation 15.0.0 ubuntu-18.10-desktop 首先安装VMware 参考资料很多,不再赘述. 之后参考 https://www.cnblogs.com/ ...

  8. 【转】SpringBoot 2.0.0新版和SpringBoot1.5.2版本中Tomcat配置的差别

    https://blog.csdn.net/wd2014610/article/details/79587161 2018年春SpringBoot 2.0.0 新版本有了很多新的改变,其中Tomcat ...

  9. Ubuntu12.04安装Chrome浏览器，并添加到左侧的启动栏

    在google官网下载google chrome deb包,有32位和64位之分: 怎么判断系统是32位还是64位的,可以用以下代码: ; int *p = &a; printf(" ...

  10. javaEE(9)_在线支付

    一.目前主要的两种支付方案 二.支付流程 1.用户在提交订单完成选择易宝支付按钮后,会跳转到如下页面选择要支付的银行,如下所示: <!DOCTYPE HTML PUBLIC "-//W ...