<!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. 《高性能MySQL》读书笔记之创建高性能的索引

    索引是存储引擎用于快速找到记录的一种数据结构.索引优化是对查询性能优化的最有效手段.索引能够轻易将查询性能提高几个数量级.创建一个最优的索引经常需要重写查询.5.1 索引基础 在MySQL中,存储引擎 ...

  2. MySql中查询语句实现分页功能

    import java.util.*;import java.sql.*; public class FruitDao {    private Connection conn;    private ...

  3. HashMap,你知道多少？

    一.前言 HashMap在面试中是个火热的话题,那么你能应付自如吗?下面抛出几个问题看你是否知道,如果知道那么本文对于你来说就不值一提了. HashMap的内部数据结构是什么? HashMap扩容机制 ...

  4. Android 滑动RecyclerView时隐藏部分控件

    在使用RecyclerView控件时,上下拖动控件时的时候,需要实时的隐藏与显示部分控件,已到达很好的用户体验.   原理很简单,当RecyclerView拖动至最上层时显示控件,当RecyclerV ...

  5. 重置Cacti密码

    Cacti登录密码忘记,重置Cacti密码 用root用户进入系统 [root@localhsot]# mysql -u root -p mysql> show databases; mysql ...

  6. codevs 1742 爬楼梯（水题日常）

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的腿很长,一次能跨过一或两阶.有一天,他 ...

  7. MIPS——递归调用

    嵌套过程 不调用其他过程的过程称为叶过程(leaf procedure).如果所有过程都是叶过程,那么情况就很简单.但是某个过程可以调用其他过程,甚至调用的是自身的“克隆”.在调用非叶过程时使用寄存器 ...

  8. MIPS——循环语句

    有关指令 add $t1,$t2,$t3 #寄存器+寄存器,$t1 = $t2 + $t3 add $t1,$t2,immediate #寄存器+立即数,$t1 = $t2 + immediate b ...

  9. Bootstrap 默认/标准按钮

    Bootstrap 默认/标准按钮 <!DOCTYPE html><html><head><meta http-equiv="Content-Typ ...

  10. 低性能3张图片轮播React组件

    import React from 'react'; import {getSwipeWay} from '../utils/swipe'; class Carousel extends React. ...