<!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. 基于Myeclipse的三大框架(SSH)整合

    文中主要基于Myeclipse进行配置,配置流程为:Hibernate --> Spring --> 整合 --> struts2 -->整合.注意:在此文中,主要讲述基于注解 ...

  2. uvm_factory——我们的工厂（一）

    factory 机制是实现(功能):通过一个字符串来创建此字符串所代表的的类的一个实例. //----------------------------------------------------- ...

  3. 实训随笔：EL表达式JSON应用

    由于之前在学校写的jsp页面都是夹杂着java代码的,所以之前写了个jsp,满满的<%%>和java代码,老师说那样太不美观了啊!!!要全部用EL表达式替代了.本人还是太笨了,弄了一上午才 ...

  4. 当ThreadLocal碰上线程池

    ThreadLocal使用 ThreadLocal可以让线程拥有本地变量,在web环境中,为了方便代码解耦,我们通常用它来保存上下文信息,然后用一个util类提供访问入口,从controller层到s ...

  5. C# 分支语句 练习题

    1.“请输入年份:”(1-9999) “请输入月份:”(1-12) “请输入日期:”(要判断大小月,判断闰年) 判断输入的时间日期是否正确 bool dateISOK = false;//放置日期是否 ...

  6. PHP框架深度解析

    PHP成为世界上最流行的脚本语言有许多原因:灵活性,易用性等等.但通常只用PHP或者其他语言编码就会显得单调.重复,这时候就需要一个PHP框架来代替程序员完成那些重复不变的部分.本文通过回答What, ...

  7. js之数组知识

    一.数组的定义(来源于Array.prototype) 1.构造函数方法: (1)var arr = new Array();//没有参数等价于 var arr = []; (2)var arr = ...

  8. 洛谷P1001 A+B Problem

    这道题…………还是很简单!!! code: #include <iostream> #include <cstdio> using namespace std; int mai ...

  9. 【动态规划】luoguP1941 飞扬的小鸟

    细节总是打挂选手:) 题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管 ...

  10. Python函数的装饰器

    函数的装饰器. 1. 装饰器 开闭原则: 对功能的扩展开放 对代码的修改是封闭 通用装饰器语法: def wrapper(fn): def inner(*args, **kwargs): # 聚合 & ...