<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      margin: 0;

    }

    #box {

      position: relative;

      width: 300px;

      height: 300px;

      background-color: red;

      overflow: hidden;

      margin: 50px;

    }

    #child {

      width: 100px;

      height: 100px;

      background-color: blue;

      margin: 50px;

      border: 10px solid yellow;

      padding: 10px;

    }

  </style>

</head>

<body>

  <div id="box">

    <div id="child">

    </div>

  </div>

  <script>

    // 3组和大小 位置相关的属性

    // offset  client  scroll

    //

    // offset  偏移量

    // var box = document.getElementById('box');

    // // 获取box的坐标

    // console.log(box.offsetLeft);

    // console.log(box.offsetTop);

    // // 获取box的大小

    // console.log(box.offsetWidth);

    // console.log(box.offsetHeight);

    // offsetParent   获取距离当前元素最近的定位父元素，如果没有定位父元素此时是body

    // 获取子元素的位置和大小

    var child = document.getElementById('child');

    console.log(child.offsetParent);

    // 获取child的位置     offsetLeft 距离offsetParent的横向偏移

    console.log(child.offsetLeft);

    console.log(child.offsetTop);

    // 获取child的大小   包括边框和padding

    console.log(child.offsetWidth);

    console.log(child.offsetHeight);

  </script>

</body>

</html>

bom-offset的更多相关文章

  1. C#压缩解压文件

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...

  2. C#基础提升系列——C#文件和流

    C#文件和流 本文主要是对C#中的流进行详细讲解,关于C#中的文件操作,考虑到后期.net core跨平台,相关操作可能会发生很大变化,所以此处不对文件系统(包括目录.文件)过多的讲解,只会描述出在. ...

  3. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  4. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  6. bom中的offset,client,scroll

    简单明了

  7. BOM以及定时器

    一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...

  8. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  9. 浏览器对象模型BOM小结

    概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...

  10. 01.总结的javascript-DOM/BOM集合

    javascript总结: javascript 主要包括三个部分:1.DOM; 2.BOM; 3.ECMAscript 一.DOM(对象文档模型) 1.几个重要概念: 1)dom节点:元素,属性,文 ...

随机推荐

  1. 从源码看全局异常处理器@ExceptionHandler&@ExceptionHandler的生效原理

    1.开头在前 日常开发中,几乎我们的项目都会用到异常处理器,我们通常会定制属于自己的异常处理器,来处理项目中大大小小.各种各样的异常.配置异常处理器目前最常用的方式应该是使用@ControllerAd ...

  2. 从JVM设计角度解读Java内存模型

    第十六章:Java内存模型 本文我们将重点放在Java内存模型(JMM)的一些高层设计问题,以及JMM的底层需求和所提供的保证,还有一些高层设计原则背后的原理. 例如安全发布,同步策略的规范以及一致性 ...

  3. c++—通讯录管理系统

    一.运用所学的结构体.地址指针等基础知识,完成通讯录管理系统 二.系统主要有以下6个功能: 1.添加联系人2.显示联系人 3.删除联系人 4.查找联系人5.修改联系人 6.清空联系人 1 #inclu ...

  4. SpringBoot集成MyBatis-Plus自定义SQL

    1.说明 本文介绍Spring Boot集成MyBatis-Plus框架后, 基于已经创建好的Spring Boot工程, 添加自定义的SQL实现复杂查询等操作. 自定义SQL主要有两种方式, 一种是 ...

  5. CSS基础 背景图片的相关属性

    属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...

  6. Echart可视化学习（八）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 新增需求 点击 2020年 ...

  7. 新增访客数量MR统计之NewInstallUserMapper相关准备

    关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新)云盘目录说明:tools目录是安装包res 目录是每一个课件对应的代码和资源等doc 目录是一 ...

  8. 我的2021年度总结-回忆录｜附旅行Vlog

    今天是农历腊月初十,还有20天就是2022年了.这一年,些许遗憾,些许期盼.时间久了,很多事已经慢慢模糊了,只记得,这最后几个月的闲碎小事. 不止多久,很久没有码字了.有些事,记不清,忆不得.时至今年 ...

  9. Linux - 文件处理

    链接服务器 ssh 使用ssh:ssh -p22 username@host(服务器地址) 输入后会提示输入密码 -p22是ssh默认端口 可以不用 登录之后会默认处于 home 路径 xshell ...

  10. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...