js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度

article/2024/12/29 8:37:09

element对象的宽高属性

  • 1. DOM树
  • 2.document对象
  • 3.element对象
  • 4. 获取元素高度宽度

1. DOM树

浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最小组成单位就是节点,这些节点是树形结构。

DOM:文档对象模型,是js操作网页的接口。DOM可以用多种语言操作,js是最常见的操作DOM的语言。

节点:是构成网页的最基本的组成部分,网页中有很多节点。html 元素、属性、文本、注释、整个文档等都是节点。

DOM树形结构如图所示:
DOM树图片

2.document对象

document对象是文档的根节点,当网页载入时,这个节点就有了。可以访问页面中所有元素。如:
1. document.body---body 2. document.documentElement---html

3.element对象

element代表元素节点,代表页面中的一个个标签,也是DOM树的叶子。

4. 获取元素高度宽度

// clientHeight--包含padding
// 获取视口高度---document.documentElement---即html整个网页document.documentElement.clientHeight;// 获取视口宽度--包含paddingdocument.documentElement.clientWidth;// 获取页面内容高度---因为body由内容撑开document.body.clientHeight// 获取垂直滚动条向下滚动的距离document.documentElement.scrollTop;// 获取水平滚动条向右滚动的距离document.documentElement.scrollLeft;

http://chatgpt.dhexx.cn/article/qCQOeU4c.shtml

相关文章

页面无法获取滚动条的高度

页面无法获取滚动条的高度,值为0 虽然网上有很多解决无法获取滚动条的高度,正常来说只需要做个兼容即可:document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop 这可以解决通常遇到的情况,但是…

小程序获取滚动条高度以及返回顶部

第一:获取滚动条高度 onPageScroll: function (e) {console.log(距顶距离,e.scrollTop)}, 第二:返回顶部 //回到顶部goTop: function (e) {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: 提示,content: 当前微信…

js 获取页面的滚动高度

想要获取页面的滚动位置可以通过给window绑定滚动事件来实现。 window.addEventListener(scroll,()>{const n document.documentElement.scrollTopconsole.log(n);}) 通过该方法可以获取页面的当前位置,或者实现其他的效果,例如电梯导航

js获取滚动条的位置

一.获取当前页面滚动条纵坐标的位置 document.body.scrollTop与document.documentElement.scrollTop IE6/7/8/IE9及以上: 可以使用 document.documentElement.scrollTop; Safari,Firefox:,Chrome: 可以使用 document.…

Django常见面试题总结(二)

接上篇文章:https://blog.csdn.net/YZL40514131/article/details/125813096?spm1001.2014.3001.5501 二十一、selected_related与prefetch_related有什么区别?(重要) 在Django中,所有的Queryset都是惰性的,意思是当创建一个查询集的时候&a…

【django】django面试题总结

一、django中间件的使用 Django在中间件中预置了六个方法,这六个方法的区别在于不同的阶段执行,对输入或输出进行干预,方法如下: 1.初始化:无需任何参数,服务器响应第一个请求的时候调用一次,…

python—Django面试题汇总

django面试题 1. Django架构:MVT: Django遵循MVC设计,并有一个专有的名词:MVT 1.M全拼为Model,与MVC的M功能相同,负责数据处理,内嵌了ORM框架。 2.V全拼为View,与MVC中的C功能相同,接收HttpRe…

超详细的Django面试题

Hello,我是 Alex 007,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。 框架层 01.什么是Django框架?(初级) Django是一个开放源代码的Web应用框架&am…

django面试题总结

列举HTTP中常见的请求方式 HTTP请求的方法: HTTP/1.1协议中共定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式 注意: 1)方法名称是区分大小写的,当某个请求所…

Django 面试题

过完年后,就是春招了,是找工作的好时机,找工作或换工作的同学需要好好准备一下面试了,最近我精选了 10 个关于 Django 的面试题,如果要看更多面试题目,请在公众号后台回复「面试」获取。祝你新的一年&#…

Django常见面试题总结(一)

一、ORM是什么?优势? ORM:中文翻译为对象关系映射。 模型类名对应数据库表名 类属性对象数据库表字典 类属性中的字段对应数据库中的约束条件 模型类的多个实例对应于实例 优势: orm的技术特点,提高了开发效率&#xf…

Django面试题

目录 1 列举Http请求中常见的请求方式 2 谈谈你对HTTP协议的认识 3 简述MVC模式和MVT模式 4 简述Django请求生命周期 5 简述什么是FBV和CBV 6 谈一谈你对ORM的理解 7 rest_framework 认证组件的流程 8 什么是中间件并简述其作用 9 django 中间件生命周期 10 django中…

2020年最新Django经典面试问题与答案汇总(上)-大江狗整理

周末抽空整理了下Django经典面试问题及答案,希望对小伙伴们学习和工作有所帮助。如果小编我是负责招聘Python Web或Django开发人员的面试官,我也会考虑问如下问题。从下面可以大致了解一个面试者对Django技术的了解程度。由于篇幅所限,本文将…

用HTML5制作的3D相册

HTML5 非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片,…

HTML5制作信息登记表

# 制作信息登记表#样式需求分析: 一、 通过最外层的大盒子对页面进行整体控制,设置宽高、背景图片及相对定位。 二、 通过标记对表单进行整体控制,对其设置宽高、边距、边框样式及绝对定位。 三、 通过 标记控制标题的文本样式,对其设置…

HTML5制作二级菜单(主菜单的子菜单)

HTML5制作二级菜单&#xff08;主菜单的子菜单&#xff09; 一、HTML文件代码二、 CSS文件代码三、效果图 一、HTML文件代码 <!--submenu.html--> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><link r…

制作HTML5海报

一、HTML5海报有什么卵用&#xff1f; HTML5海报作用跟一般的海报差不多&#xff0c;但是拥有更生动的灵活的页面和便捷快速的传播途径&#xff08;网络&#xff09;。不仅可以在微信公众号中推广&#xff0c;也可以在票圈&#xff0c;空间&#xff0c;群上推广。做得好的海报&…

用html5和css制作信息登记表

<!doctype html> <html><head><meta charset"utf-8"><title>信息登记表</title><!-- <link rel"stylesheet" href"style07.css" type"text/css"> --><style type"text/css&q…

html5制作购物车页面,利用html来制作一个简单美观的购物车界面

首先来展示一下购物车界面: (学习视频分享:html视频教程) 这个页面只是实现了其布局视图,没有使用js或者jquery相关语言,在博主看来是比较利于我们将其加入到自己的程序中的以下是相关代码: index.html 商品名称单价数量操作旁氏洗发露991删除旁氏洗发露991<

html5制作圆形

代码如下 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Document</title> <style type"text/css"> .addBg { width: 100px; height: 100px; background-color…