JS高程12.2.3元素大小的学习笔记

《JavaScript高级程序设计》中讲述了通过JS如何控制页面中元素的大小，其中涉及到三对属性：偏移量，客户区大小，滚动大小。以前自己经常看到这三对属性，但是具体不是很清楚，容易混淆。所以想写篇文章记录一下自己的学习收获，让自己理解的更加深刻，同时也请各位前辈帮忙指正一下自己理解错误的地方。

首先元素在屏幕上的可见大小由元素的宽度，高度决定，包括所有内边距，滚动条和边框大小（不包括外边距）

1.偏移量

偏移量中包括如下四个属性：

1.offsetHeight：元素在垂直方向上占用的空间大小，以像素计，包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度

2.offsetWidth：元素在水平方向上占用的空间大小，以像素计，包括元素的宽度，（可见的）垂直滚动条的宽度，左边框宽度和右边框宽度

3.offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离

4.offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离

下图形象的展示了上述四个属性表示的大小和距离

时间： 2024-12-15 01:45:26

JS高程12.2.3元素大小的学习笔记的相关文章

《JS高程》基本类型和引用类型的值学习笔记

ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 创建方式类似:创建一个变量并为其赋值. (1)基本类型值和引用类型值比较 基本类型值 引用类型值 简单的数据段 可能由多个值构成的对象 值源自5种基本数据类型:Undefined.Null.Boolean.Number 和 String 值是保存在内存中的对象 在内存中占据固定大小的空间,保存在栈内存中 保存在堆内存中 按值访问 按引用访问 不能添加属性 能动态地添加和删除属性 复制变量值时,创建一个新值(副本)

js高级程序设计（第三版）学习笔记（第一版）

ecma:欧洲计算机制造商协会iso/iec:国际标准化和国际电工委员会 dom级别(10*)文档对象模型1:DOM核心(映射基于xml文档)与dom html(在dom核心基础上)2:对鼠标,事件,范围,遍历,还有对css样式表的支持dom2:新接口...视图,事件(鼠标,移动),样式(css),遍历与范围(对文档树的操作)3:对文档加载和保存,验证模块,对核心进行扩展,对xml.0规范其他domsvg可伸缩矢量图mathml数学标记语言mghi同步多媒体集成语言ie5 dom1mozilla

数组元素复制 反转 学习笔记

package com.ctgu.java.exer; public class TestArray3 { public static void main(String[] args){ int[] arr = new int[]{12,43,9,0,-65,-99,100,9}; int max = arr[0]; for(int i = 1; i < arr.length;i++ ){ if(max < arr[i]){ max = arr[i]; } } System.out.print

Docker学习总结（12）——非常详细的 Docker 学习笔记

一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化平台 Docker Hub: 用于分享.管理 Docker 容器的 Docker SaaS 平台 -- Docker Hub Docker 使用客户端-服务器 (C/S) 架构模式.Docker 客户端会与 Docker 守护进程进行通信.Docker 守护进程会处理复杂繁重的任务,例如建立.运行.发布你的 Docker 容器.Docker 客户端和守护进程可以运行在同一个系统上,当然你也可以使用 Docker

JS在IE和FF下attachEvent,addEventListener学习笔记（转）

对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明:  事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件

2014年12月9日星期二 oc学习笔记

OC的第二个类 Touch第二个类文件.m Open 第二个类文件.m /* 人 类名:Person 属性(成员变量\实例变量):体重.年龄 行为(方法):走路 */ /*1.类的声明 *成员变量 *方法的声明 */ 例一: #Imort <Foundation/Foundation.h> @interface Person:NSObject { //成员变量:(成员变量必须写在大括号里面) @public Int age; double weight; } -(void)walk; @end

js对数组元素大小排序实例代码

js对数组元素大小排序实例代码:在实际应用中,有时候需要对数组中的元素按照大小来进行排序,当然是先排序的方法有多种,比如使用数组对象自带的sort()方法,本章节再来分享一种其他的方式,先看代码实例: var org=[5,4,3,2,1,6,7,9,8,10]; var tempArr=new Array(); for(var i=0;i<org.length;i++) { if(i==0) { tempArr[0]=org[0]; //把第一个元素放到新序列 } else { for(var

dojo/dom-geometry元素大小

在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中 元素宽度=content宽度,而在ie中 元素宽度=content宽度+border宽度+padding宽度.IE8中加入了box-sizzing,该css属性有两个值:border-box.content-box分别对应ie和ff中元素宽度的工作方式. 偏移量:offsetLeft.offsetTop.offsetWidth.offsetHeight off

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ------------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即不太具体的节