关于网页的宽&高
时间:2020-06-10
本文章向大家介绍关于网页的宽&高,主要包括关于网页的宽&高使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. Element.clientHeight
和Element.clientWidth
两者分别返回元素节点 可见部分 的高度和宽度。此“可见部分”包括padding
、但不包括border
、margin
和滚动条
。
let rootElement = document.documentElement;
//网页当前可见高&宽
rootElement.clientHeight
rootElement.clientWidth
2. Element.scrollHeight
和Element.scrollWidth
两者分别返回网页元素的总高度 & 总宽度。其包括padding
,但不包括border
、margin
和滚动条
。
let rootElement = document.documentElement;
//网页总高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight
//网页总宽度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth
3. Element.scrollLeft
和Element.scrollTop
两者分别表示元素的水平滚动条向右滚动的像素值,以及垂直滚动条向下滚动的像素值。若网页内没有滚动条,则其值为 0
。
let rootElement = document.documentElement;
//当垂直滚动条滚到最底部时,返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight
//当水平滚动条滚到最右侧时,返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth
4. Element.offsetHeight
和Element.offsetWidth
两者包括padding
、border
和滚动条
。
let rootElement = document.documentElement;
//网页总高度
rootElement.offsetHeight
document.body.offsetHeight
//网页总宽度
rootElement.offsetWidth
document.body.offsetWidth
综上,获取网页高度&宽度的方法有:
let rootElement = document.documentElement;
//由于<html>和<body>的宽度可能设的不一样,从<body>上取值会更保险一点。
//网页总高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//网页总宽度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth
//可见部分高度
window.innerHeight //包括滚动条
rootElement.clientHeight //不包括滚动条
//可见部分宽度
window.innerWidth //包括滚动条
rootElement.clientWidth //不包括滚动条
原文地址:https://www.cnblogs.com/10yearsmanong/p/13083862.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Chrome 84 正式发布,支持私有方法、用户空闲检测!
- 类及数据库的应用,G-MARK网站数据Python爬虫系统的构建
- 获取素材图无忧,Pixabay图库网Python多线程采集下载
- Python关键词数据采集案例,5118查询网站关键词数据采集
- Python结巴分词,字符串余弦相似度算法实现关键词筛选及整理
- git的分支远程连接和远程分支的拉取推送及冲突处理
- requests session的应用,python金点设计奖数据爬虫
- 站长工具关键词挖掘采集,Python关键词批量挖掘采集工具
- python百度关键词相关搜索词采集,链轮查询采集exe工具
- Python最火爬虫框架Scrapy入门与实践,豆瓣电影 Top 250 数据采集
- Python爬虫三种解析方式,Pyhton360搜索排名查询
- Python关键词百度指数采集,抓包Cookie及json数据处理
- 常用的package.json,还有这么多你不知道的骚技巧
- 【词库】Python关键词筛选分类,Levenshtein编辑距离算法分词
- 爬取数据缺失的补坑,Python数据爬取的坑坑洼洼如何铲平