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节点:元素,属性,文 ...
随机推荐
- 【2021/12/31】uniapp之安卓原生插件开发教程
uniapp之安卓原生插件开发教程 准备 hbuilderX,下载 app离线SDK,下载 Andorid Studio,安卓官方或中文社区 证书(可以自己准备,也可以使用android Studio ...
- MySQL测试题——开发公司人事管理系统，包括 Employee表 和 Department表
一.需求分析 我们的开发团队,计划开发一款公司人事管理软件,用于帮助中小型企业进行更加高效的人事管理.现在需要对数据库部分进行设计和开发,根据对需求和立项的分析,我们确定该数据库中最核心的两个表为员工 ...
- javaScript系列 [43]-TS、Class and ES5
本文讨论Typescript中的Class同ES5构造函数的对应关系,涉及TypeScript的诸多语法.构造函数.面向对象以及原型对象等相关知识点细节,本文只简单对比并不进行深入展开. TypeSc ...
- IdentityServer4 综合应用实战系列 （一）登录
这篇文章主要说登录,这里抛开IdentityServer4的各种模式,这里只说登录 我们要分别实现 4中登录方式来说明, IdentityServer4本地登陆 . Windows账户登录(本地的电 ...
- Python基础案例练习：制作学生信息管理系统
一.前言 学生信息管理系统,相信大家或多或少都有做过 最近看很多学生作业都是制作一个学生信息管理系统 于是,今天带大家做一个简单的学生信息管理系统 二.开发环境: 我用到的开发环境 Python 3. ...
- VirtualBox虚拟机安装win8/10
你可能会遇到过,需要win8来做一些操作,不过自己的本机是win7,难道要重装系统吗?操作好了后,想用回win7怎么办?这个时候,如果旁边有人的系统刚好符合你对系统的要求,那可以借用,如果使用时间太长 ...
- linux(CentOS7) 之 jdk1.8 下载及安装
下载 一.百度搜索oracle,进入官网(或直接进入官网https://www.oracle.com) 二.选择 products 下的 java 三.选择Download Java 四.往下翻找到J ...
- FIS本地发布-其他同事通过IP访问
方法很简单,只需在fis的配置文件那里进行修改即可. 文件路径在 C:\Users\Su\AppData\Roaming\npm\node_modules\fis\node_modules\fis-c ...
- vue 快速入门 系列 —— 模板
其他章节请看: vue 快速入门 系列 模板 前面提到 vue 中的虚拟 dom 主要做两件事: 提供与真实节点对应的 vNode 新旧 vNode 对比,寻找差异,然后更新视图 ①.vNode 从何 ...
- 使用.NET 6开发TodoList应用(30)——实现Docker打包和部署
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 .NET 6 Web API应用使用最多的场景是作为后端微服务应用,在实际的项目中,我们一般都是通过将应用程序打包成docke ...