bom-offset
<!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的更多相关文章
- C#压缩解压文件
using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...
- C#基础提升系列——C#文件和流
C#文件和流 本文主要是对C#中的流进行详细讲解,关于C#中的文件操作,考虑到后期.net core跨平台,相关操作可能会发生很大变化,所以此处不对文件系统(包括目录.文件)过多的讲解,只会描述出在. ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- bom中的offset,client,scroll
简单明了
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- javascript中BOM部分基础知识总结
一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管 ...
- 浏览器对象模型BOM小结
概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...
- 01.总结的javascript-DOM/BOM集合
javascript总结: javascript 主要包括三个部分:1.DOM; 2.BOM; 3.ECMAscript 一.DOM(对象文档模型) 1.几个重要概念: 1)dom节点:元素,属性,文 ...
随机推荐
- Certified Robustness to Adversarial Examples with Differential Privacy
目录 概 主要内容 Differential Privacy insensitivity Lemma1 Proposition1 如何令网络为-DP in practice Lecuyer M, At ...
- <学习opencv>过滤器和卷积
/*=========================================================================*/ // 过滤器和卷积 /*========== ...
- 使用 DML语句针对仓库管理信息系统，进行查询操作
查看本章节 查看作业目录 需求说明: 查询所有电视机产品的基本信息,要求显示产品编号.产品名和进货单价 查询所有产品的基本信息,要求按类型升序.价格降序显示查询信息 显示所有不重复的产品类型 显示进货 ...
- 编写Java程序，使用单例模式，创建可以生成银联借记卡号的工具类，银联借记卡号是一个 19 位的数字，卡号以“62”开头，如图所示。
查看本章节 查看作业目录 需求说明: 使用单例模式,创建可以生成银联借记卡号的工具类,银联借记卡号是一个 19 位的数字,卡号以"62"开头,如图所示. 实现思路: (1)创建 J ...
- 日志分析系统 - k8s部署ElasticSearch集群
K8s部署ElasticSearch集群 1.前提准备工作 1.1 创建elastic的命名空间 namespace编排文件如下: elastic.namespace.yaml --- apiVers ...
- GitForWindows工具集(GitBash命令行)
1.Git For Windows工具集 Git For Windows专注于提供一套轻量级的本地工具集, 它将Git SCM的完整功能集引入Windows, 同时为Git用户提供适当的用户界面, 方 ...
- centos6.5-Apache优化
Apache的网页压缩功能 一.配置网页压缩功能 在配置压缩功能以前访问网页的响应头部 Response Headers view source Accept-Ranges:bytes Connect ...
- STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解)
目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) 前面 ...
- linux分区（挂载）
主分区: 最多4个扩展分区: 最多一个: 扩展分区+主分区最多4个: 不能存放数据,只能划分逻辑分区逻辑分区: 可格式化.存放数据: 分区编号只能从5开始(1.2.3.4编号为主分区或扩展分区) 所有 ...
- 初识python： 递归函数 - 分解质因数
分解质因数: 任何一个合数都可以写成几个质数相乘的形式.其中每个质数都是这个合数的因数,叫做这个合数的分解质因数.分解质因数只针对合数. 比如: 8 分解质因数是:2*2*2 10分解质因数是:2*5 ...