前端各种关于宽度、高度,坐标位置等 知识点总结,常用的_yunchong_zhao的博客-程序员秘密

技术标签: 前端  javascript  css3  

三个浏览器一样的效果的话我就不说,不一样的我会标注

1. 网页可见区域宽

 document.body.clientWidth

2. 网页可见区域高

document.body.clientHeight

3. 网页可见区域宽(包括边线的宽)

document.body.offsetWidth

4. 网页可见区域高(包括边线的高)

document.body.offsetHeight

5. 网页正文全文宽 也就是 body的宽度

 document.body.scrollWidth

6. 网页正文全文高

如果body 内容为空那么 这个值就是 0

document.body.scrollHeight

7. 网页滚动的高度(卷去的高度)

document.documentElement.scrollTop

8. 网页文档的总高度, 用户可以看到的高度

网页没有内容就是等于设备的高度

document.documentElement.scrollHeight

9. 网页文档的总宽度

document.documentElement.scrollWidth

10. 屏幕分辨率的高度(网页的高度 和 8 相同)

window.screen.height

11. 屏幕分辨率的宽度(网页的宽度 和 9 相同)

window.screen.width

12. 元素距离window 顶部的距离

let el = document.querySelector('selector')
el.offsetTop

13. 元素距离window 左侧的距离

let el = document.querySelector('selector')
el.offsetLeft

今天先写到这里 后续再继续更新 今天加班到 九点多回来 又写了 两篇博客 给今天工作的做总结
确实有点累了,明天还得继续加班。
后续继续更新。
参考的链接 :https://www.cnblogs.com/mengshenshenchu/p/6666300.html


后续再继续更新。 时间2021-10-21 22:20

晚安

关注我 持续更新 前端知识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yunchong_zhao/article/details/120895818

智能推荐

数学推导+纯Python实现机器学习算法:Lasso回归_文文学霸的博客-程序员秘密

本节我们要介绍的是基于L1正则化的Lasso模型,在正式介绍模型之前,笔者还是想带大家复习一下过拟合和正则化等机器学习关键问题。正则化与L1范数正则化是防止模型过拟合的核心技术之一,关于...

web前端开发技术要求会什么_qq_43675712的博客-程序员秘密

对web前端多少有了解的人,都知道Web前端开发工程师是一项很特殊的工作,现今互联网时代,静态的网页制作已经无法满足企业与用户间复杂的个性化需求了,更多的是转变为网站后台开发、网站架构、SEO网站优化等综合性的工作,这其中需要web前端工程师具备丰富的知识面和开发经验,更好地优化网站,让用户感受到更加棒的交互体验。那么学习web前端开发技术要求会什么呢?一起和苏州学码思小编来看下。精通HTML+...

UnicodeEncodeError: ‘ascii‘ codec can‘t encode characters in position问题的解决办法_jazz2013的博客-程序员秘密

UnicodeEncodeError: 'ascii' codec can't encode characters in position问题的解决办法

VS2013打开老版本的VC++6.0遇到错误:“CException”: 不能实例化抽象类_wwwlyj123321的博客-程序员秘密

说明:工程在vc6++6.0编译通过,在2013版本中出现“CException”: 不能实例化抽象类 的错误。VS2003之后的版本中,CException的定义与VC++6.0中不同。用一个CException派生类代替CException。CDib中把“throw new CException ”中的CException改为CFileException就可以了。

FPGA驱动DAC芯片输出(以TLV5618为例)_StrangerZhou1的博客-程序员秘密_dac fpga

一、任务使用FPGA芯片控制DAC采集芯片,输出指定的电压值。二、硬件部分为了将FPGA输出的数字电压转换成模拟电压,我们使用到了数模转换芯片(简称DAC)TLV5618。进行设计前,我们先到网上检索并查看了该芯片的数据手册。1.芯片功能图2.端口功能表从功能图和功能表中我们可以看出,TLV5618有四个输入端口:片选信号CS、数据串行输入端口DIN、模拟参考电压REF、数字时钟SCLK。两个输出端分别为OUTA和OUTB,均为对应的模拟电压输出端。3.时序图从时序图中我们可以看到

【简单表格分页功能】前端用springboot写一个简单的表格分页功能并交互显示在网页上【详细注释,简易版本】_接口写好了吗的博客-程序员秘密_springboot分页前端代码

提醒:如果前端小伙伴没有看懂这里一些逻辑和功能什么意思的,建议先去看我另一个帖子,里面详细注释用前端听得懂的话说了一遍后端的创建项目后各个文件是干什么用的,以及接口返回数据等逻辑,看了你再来看这个就会明白了。哪里说的很详细了,这里有些就不详细再说一遍了。如果看完了还是不理解可以问,我会的话就跟你说。帖子:【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释,详细注释,谁都看得懂】如果不知道实体类是啥的,可以理解成就是前端的对象。流程逻辑解释:用前端听的懂的大白

随便推点

使用Spring的classutil类体验_不止鱼的博客-程序员秘密

如下/* * Copyright 2002-2006 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License.

KubeSphere 内置的 Prometheus 通过 remote write 至 Thanos 存更长期数据_[shenhonglei]的博客-程序员秘密

背景说明KubeSphere 内置经过优化、资源占比较小的、高可用的,两副本的 Prometheus 。 它可以备份到集群外,通过 remote-write到其他存储,但是由于资源占用太多,不建议发送到 es。

Jest难点进阶_roamingcode的博客-程序员秘密

Jest难点进阶snapshot 快照测试快照的使用const generateConfig= () => ({ host: 'localhost', port: 3000})test('test config snapshot', () => { expect(generateConfig()).toMatchSnapshot()})test('test another config snapshot', () => { expect(generateA

个人阅读习惯的变迁_riusksk的博客-程序员秘密

6月2日,亚马逊中国发布公告:亚马逊将于2023年6月30日在中国停止Kindle电子书店的运营。大学时代:纸质书与彩屏手机刚读大学时,天天泡图书馆看书,基本不午休,但后来书架上想看的都看完了,其它想看的又没有。只好上网找电子书,但又没电脑,只有一把诺基亚3100,据说是诺基亚出品的第一款彩屏手机,当年硬生生地用它看完了《Windows程序设计》与《Windows环境下3...

SpringBoot2+netty+webSocket实现前后端互相发消息_晨曦若你的博客-程序员秘密

Maven需要的依赖 <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifactId> <version>4.1.42.Final</version>...

深度学习-20:神经科学、脑科学和稀疏特性_MTVideoAI的博客-程序员秘密

深度学习-20:神经科学、脑科学和稀疏特性CSDN专栏: 机器学习&深度学习(理论/实践)第二次世界大战之后,美苏在全维度展开了霸权竞赛,人工智能研究伴随着计算机的发展也开始进入佳境。经过经过半个多世纪的发展,人工智能逐渐形成:符号学派、贝叶斯学派和联结学派三个流派。符号学派:以谓词逻辑表示法理论为基础的符号主义占据了绝对的主流,但是到了上世纪90年代,符号主义具有的先天缺陷开...

推荐文章

热门文章

相关标签