clientHeight / scrollHeight / offsetHeight 等属性的区别图

2024-02-29 13:08

本文主要是介绍clientHeight / scrollHeight / offsetHeight 等属性的区别图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

网页(内容)可见区域宽:document.body.clientWidth

网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth





这篇关于clientHeight / scrollHeight / offsetHeight 等属性的区别图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/758918

相关文章

hevc和H.264格式的区别

HEVC(High Efficiency Video Coding)和H.264(也称为Advanced Video Coding,AVC)都是视频压缩标准,但它们之间存在一些显著的区别,主要集中在压缩效率、资源需求和兼容性方面。 压缩效率 HEVC,也被称为H.265,提供了比H.264更高的压缩效率。这意味着在相同的视频质量下,HEVC能够以大约一半的比特率进行编码,从而减少存储空间需求和

Java面试题:通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中,连接(JOIN)用于在多个表之间组合行。最常用的连接类型是内连接(INNER JOIN)、左外连接(LEFT OUTER JOIN)和右外连接(RIGHT OUTER JOIN)。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表:Customers 和 Orders。 Customers CustomerIDCus

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览(所见即所得,以及多个屏幕预览),这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架,so,创建项目时AS比较慢。android studio基于gradle构建项目,你无法同时集中管理和维护多个项目的源码,而eclipse ADT可以同时打开

在 Java 中,JDK、JRE、JVM 分别代表什么,有何关系和区别?

在Java开发的世界中,我们会经常听到JDK、JRE和JVM这三个词。它们都与Java的运行环境以及Java程序的编译和运行有关,它们之间也存在一些关联性和区别。 什么是JDK、JRE和JVM 我们来看它们分别是什么。 JDK,全称Java Development Kit,即Java开发工具包。顾名思义,JDK是用于Java开发的一套工具包,里面包含了Java的编译器javac、

QT 中ListView和ListWidget有什么区别

ListView和ListWidget在Qt框架中都是用于显示列表数据的控件,但它们在使用方法和特性上存在一些明显的差异。以下是关于它们用法不一样的地方的详细分析: 数据管理方式: ListView:使用QAbstractItemModel数据模型来管理和显示列表数据。QAbstractItemModel是一个抽象类,允许开发者自定义数据模型以适应特定的数据结构和需求。这使得ListView在处

CALayer相关的属性

iOS开发UI篇—CAlayer层的属性 一、position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角为原点(0, 0)   @property CGPoint anchorPoint; 称为“定位点”、“锚点”

CSS背景属性:打造丰富视觉效果的背景设计

在网页设计中,背景是创建视觉吸引力和设置页面基调的重要元素。CSS提供了多种背景属性来控制元素的背景样式,包括颜色、图像、尺寸、位置和重复方式。本文将详细介绍CSS中的背景属性,包括background简写属性以及background-color、background-image、background-repeat、background-position和background-size等属性。

Transformers和Langchain中几个组件的区别

1.对于Transformers框架的介绍 1.1 介绍: transformers 是由 Hugging Face 开发的一个开源库,它提供了大量预训练模型,主要用于自然语言处理(NLP)任务。这个库提供的模型可以用于文本分类、信息抽取、问答、文本生成等多种任务。 1.2 应用场景: 文本分类:使用 BERT、RoBERTa 等模型进行情感分析、意图识别等。命名实体识别(NER):使用序列

CSS中的表格专有属性:提升表格布局与样式的灵活性

CSS为表格提供了一系列专有属性,这些属性使得开发者能够对表格的布局和样式进行精细控制。在本文中,我们将介绍几个关键的CSS表格属性:table-layout、border-spacing、border-collapse 和 empty-cells,以及它们如何影响表格的显示效果。 1. table-layout table-layout属性定义了表格的布局算法,主要有两个值: auto:浏

java的clone() 深克隆与浅克隆的区别

克隆的目的:快速创建一个已有对象的副本。 克隆的步骤: 创建一个对象将原有对象的数据导入到新创建的数据中 1. Object的clone()源代码简介 [java]  view plain copy /**   * Creates and returns a copy of this {@code Object}. The default   * i