前端应熟知的各种宽度高度

目录

一、window对象- 浏览器对象模型

二、Document对象-文档对象模型


前端做项目时经常需要使用到各种宽度高度,可以从两个地方获得这些数据。

一、window对象- 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

window对象关于宽高的属性有:

//window对象无需引用,在js代码处直接使用即可。window.innerHeight // 浏览器窗口的内部高度(包括滚动条)
window.innerWidth  // 浏览器窗口的内部宽度(包括滚动条)window.outerHeight //属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
window.outerWidth  //属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。//window.screen对象在编写时可以不使用 window 这个前缀。screen.availWidth  // 可用的屏幕宽度(不包括Windows任务栏)
screen.availHeight // 可用的屏幕高度(不包括Windows任务栏)screen.width   // 返回屏幕的总宽度
screen.height  // 返回屏幕的总高度

当浏览器在电脑全屏时, screen.width == window.outerWidth

二、Document对象-文档对象模型

文档对象模型(DOM)。当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

文档对象模型涉及的宽高:

var elmnt = document.getElementById("myDIV");elmnt.clientWidth  //该元素的像素宽度,宽度包含内边距(padding)
elmnt.clientWidth  //该元素的像素高度,高度包含内边距(padding)elmnt.offsetWidth   //宽度包含内边距(padding)、边框(border)及滚动条
elmnt.offsetHeight  //高度包含内边距(padding)、边框(border)及滚动条//scrollWidth 值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与 clientWidth 相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条(如果存在)。 它还可以包括伪元素的宽度,例如 ::before 或 ::after。 如果元素的内容可以适合而不需要水平滚动条,则其 scrollWidth等于 clientWidthelmnt.scrollWidth   //元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度
elmnt.scrollHeight  //元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小高度//elmnt.style.width,当box-sizing:content-box(默认值), 元素实际宽度=width(宽度) + padding(内边距) + border(边框)。
//elmnt.style.width,当box-sizing:border-box,元素实际宽度=width(宽度)。elmnt.style.width   //宽度。
elmnt.style.height //高度。

     

宽度展示图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动态图形设计:创造视觉运动的艺术

什么是动态设计?动态设计是一个设计领域,指在用户界面中使用动态效果的设计。简单地说是为了移动用户界面上的元素而设计的。良好的动态设计可以吸引用户的注意,提高用户体验和满意度。动态设计也是界面设计与动态设计的结合,将设…

后端如何减少生产问题以及如何处理生产问题

后端如何减少生产问题以及如何处理生产问题 事前–如何减少生产问题 开发多做单元测试,自测。 提前做单元测试,能够及早发现问题。 哪怕只是很小的改动,也要测试回归 有些研发同事,优化了代码,以为只是很小的改动…

vector和array在C++中的区别以及如何在C++中定义array类型

在C中,vector和array的主要区别体现在以下几个方面: 内存分配和大小调整: vector是一个动态数组容器,其内存空间大小是能够改变的。当需要添加新元素而当前内存空间不足时,vector会自动申请更大的内存空间&#xff08…

[240625] Continue -- 开源 Copilot | Web-Check 网站分析工具 | Story of EOL

目录 Continue -- 开源 CopilotWeb-Check 网站分析工具Web-Check 提供全面的网站分析功能Web-Check 支持多种部署方式:配置选项开发环境Web-Check 使用多种数据源进行分析 Story of EOLASCII 文本中的换行符问题 Continue – 开源 Copilot 让 Continue 和 Ollama 成…

无人机螺旋桨理论教学培训课程

本文档为一份详细的关于TYTO机器人公司提供的电机和螺旋桨理论及其实验操作的指南。指南首先概述了材料、实验目标以及实验的介绍部分,随后详细阐述了理论问题、实验步骤和附录内容。实验目的在于通过实际测试来测量和理解不同螺旋桨参数对无人机性能的影响&#xf…

上海亚商投顾:沪指5连阴 工业母机概念逆势走强

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 三大指数今日继续调整,沪指午后一度跌近1%,随后探底回升跌幅收窄,创业板指…

java之可变字符串之append方法

可变字符串如果要添加内容,需要用到append方法 语法格式如下 sbf.append(obj) 其中sbf是任意的可变字符串 obj是任意数据类型的对象 这个方法是将任意数据转换成字符串,然后添加到此序列中 public class Buffer {public static void main(String[]…

3浏览器安全

上一篇👉: 浏览器渲染原理 浏览器安全涉及多方面的威胁与防护,其中XSS(跨站脚本攻击)与CSRF(跨站请求伪造)是最常见的两类安全问题,而中间人攻击与网络劫持也是不容忽视的安全隐患。下面是对这…

人工智能前沿讲座——脑与类脑智能

目录 前言 对脑与类脑智能的介绍 前沿计划 实验 相关应用 实验室做的项目 最后同学问的三个问题。 有没有可能在不同的时刻,大脑产生相同的电信号? 有没有什么方法可以人工模拟神经元,再组合成神经网络? 有没有比大脑层…

如何确保消息不被重复消费

一、重复消费问题出现的原因 导致重复消费的原因可能出现在生产者,也可能出现在 MQ 或 消费者。这里说的重复消费问题是指同一个数据被执行了两次,不单单指 MQ 中一条消息被消费了两次,也可能是 MQ 中存在两条一模一样的消费。 生产者&…

基于Python的求职招聘管理系统【附源码】

摘 要 随着互联网技术的不断发展,人类的生活已经逐渐离不开网络了,在未来的社会中,人类的生活与工作都离不开数字化、网络化、电子化与虚拟化的数字技术。从互联网的发展历史、当前的应用现状和发展趋势来看,我们完全可以肯定&…

金融企业数据跨境流动的核心需求是什么?如何才能落地?

在金融行业,涉及到的数据跨境流动的场景多种多样,主要涉及到金融机构的跨国经营、全球贸易以及服务贸易等多个方面: 企业跨国经营:当金融机构进行跨国经营时,如银行在海外设立分支机构或进行跨境投资,会涉及…

408数据结构-图的应用1-最小生成树 自学知识点整理

前置知识:图的遍历 图的应用是408初试历年考查的重点。不过一般而言,这部分内容直接以算法设计题形式考查的可能性极小,更多的是结合图的实例来考查算法的具体操作过程,要求掌握的是手推模拟给定图的各个算法执行过程。此外&#…

说点智驾领域的实话!感知|定位|规划控制|就业……

你们有没有一种感觉,近几年自动驾驶技术栈迭代太快,自己稍不留神就与当下主流技术产生脱节了。 其实说实话,并非只有你如此,行业内的工程师都有类似感受。 智能驾驶行业交流群:点击进 分享几个我们最近聊天中的几位朋…

【动态内存】详解

Hi~!这里是奋斗的小羊,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 💥💥个人主页:奋斗的小羊 💥💥所属专栏:C语言 🚀本系列文章为个人学习…

【Git】版本控制器的方式:SVN集中式版本控制工具和Git分布式版本控制工具

一、应用场景 二、版本控制器的方式 三、SVN 集中式版本控制工具 四、Git 分布式版本控制工具 五、Git工作流程 一、应用场景 Git 在开发过程中提供了多种应用场景,帮助开发团队高效地管理代码、协同工作,并保证代码质量。以下是一些具体应用场景和相应…

Rocky Linux设置静态IP

[connection] idens160 uuidcd246f67-c929-362a-809d-f1b44ddc5d25 typeethernet autoconnect-priority-999 interface-nameens160 timestamp1719094243[ethernet][ipv4] ## 在IPV4下面修改如下内容 methodmanual address192.…

每日一题——Python实现PAT乙级1030 完美数列(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 初次尝试 再次尝试 代码结构 时间复杂度分析 空间复杂度分析 总结 我要更强 时…

【SQL】InnoDB 和 MylSAM 的区别

InnoDB 和 MyISAM 是 MySQL 中两种常见的存储引擎,它们在特性和适用场景上有显著的区别。下面是它们的主要区别点: 1. 事务支持 InnoDB: 支持事务(ACID 特性),即原子性、一致性、隔离性和持久性。支持行级…

pytorch笔记:named_parameters

named_parameters 是 PyTorch 中一个非常有用的函数,用于访问模型中所有定义的参数及其对应的名称。它是 torch.nn.Module 类的方法之一,返回一个生成器,生成 (name, parameter) 对,name 是参数的名称,parameter 是对应…