<!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. PlatformIO+Jlink进行调试

    PlatformIO自带调试功能具体配置如下 https://docs.platformio.org/en/latest/plus/debug-tools/jlink.html     我是用的是直接 ...

  2. Java集合与数组的联系和区别

    数组特点 存放一组相同的数据类型(基本类型和对象类型)的数据,从而实现对数据的管理. 优势:可以快速的通过下标对数组元素进行访问,效率高 劣势:容量实现定义好了,不能随着需求变化而扩容. 集合特点 集 ...

  3. Mybatis获取自增主键的值

    pojo: public class User { private Integer id; private String name; private String pwd; setter和getter ...

  4. 深入浏览器工作原理和JS引擎（V8引擎为例）

    浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...

  5. update sql时，常记错同时更新多个参数用and，正确是用逗号

    记录一下,经常记错的一个点,在update多个参数时,多个参数之间用and连接,这个时候,语句就会报错了 其实,正确的是用逗号隔开, 使用SQL中的update更新多个字段值,set后面的条件要用逗号 ...

  6. docker查看容器的ip地址

    查看Docker的底层信息. docker inspect 会返回一个 JSON 文件记录着 Docker 容器的配置和状态信息 # 列出所有容器的IP地址docker inspect --forma ...

  7. vue iview element-ui兼容IE11浏览器

    首先安装babel-polyfill npm install babel-polyfill --save-dev 入口文件引用,在main.js中引用 import 'babel-polyfill' ...

  8. HDUA/B

    同样求逆元的题目,费马的条件,首先要保证p为质数,然后保证a与p互素. 数据范围问题,要保证在数据范围内,所以要b先模上mod #include<bits/stdc++.h> using ...

  9. Jenkins Hackfest 用户体验文档报告

    Jenkins 技术文档是我们项目的重要组成部分,因为它是正确使用 Jenkins 的关键.好的文档可以指导用户,并鼓励选择好的实现方式.这是用户体验的关键部分.在最近的 Jenkins UI/UX ...

  10. CobaltStrike简介与安装

    CobaltStrike的安装我踩了不少坑,所以我将正确的安装及启动过程跟大家分享一下,以免大家走一些不必要的弯路 Cobaltstrike简介 Cobalt Strike是一款美国Red Team开 ...