原生js获取屏幕高度
原生js获取宽高度
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth // 部分jQuery函数
$(window).height() //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height() //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width() //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding // 字段注释
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
原生js监测页面变化
//监听window变化的方法window.onsize = function () {console.log("11");}//jquery写法$(window).resize(function () {console.log("22");
})
//注意:浏览器窗口大小改变时,这段代码会执行多次,对性能影响大,容易造成浏览器假死。var resizeTimer = null;$(window).resize(function(){if(resizeTimer){clearTimeout(resizeTimer);}resizeTimer = setTimeout(function(){console.log("yyds")},100)
})
//通过使用定时器的方式来让代码延迟执行,每次窗口改变的时候就清除事件,只有停下改变之后才会继续再执行,解决resize执行多次的问题。
在写demo中使用
// 为了让背景图片自适应全屏高度用法,避免页面全屏无法铺满屏幕
$(function () {var html = document.getElementsByClassName('growup')[0];let he = html.scrollHeightlet he1 = document.documentElement.clientHeightif (he < he1){html.style.height = he1 - 130 + 'px'} else{html.style.height = he + 'px'}});var resizeTimer = null;$(window).resize(function () {if (resizeTimer) {clearTimeout(resizeTimer);}resizeTimer = setTimeout(function () {console.log("窗口改变")location.reload();// console.log($(window).height())}, 300)})
原生js获取屏幕高度相关推荐
- 关于js获取屏幕高度和宽度( window.document.body,window.screen)(PC端和移动端)
在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度.每每到这个时候不知道使用哪个: widow.document.body.offsetWidth; window.screen.avai ...
- js获取屏幕高度宽度分辨率问题,当css3的@media查询写法不能解决问题时请看这个
当css的@media查询写法如下: @media screen and (max-width: 1920px) { .feature-table { height: 980px;backgr ...
- js和jQuery 获取屏幕高度、宽度
js获取屏幕高度,宽带 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body ...
- vue原生获取屏幕高度
vue原生获取屏幕高度 1.全界面 2.组件中 vue原生获取屏幕高度 技术胖pos实战练习知识点 视频链接 1.全界面 .main{float: left;width: 100%;height: 1 ...
- 微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
原生JS集成腾讯IM实时聊天/实时音视频对话功能 一.腾讯IM集成 前期准备 实例创建及初始化 IM登录 收发消息 二.腾讯音视频实时互动 跑通demo 三.同时集成即时通讯IM 和 音视频直播的 坑 ...
- 原生js实现地址选择组件(三级联动)
1.实现效果 2.实现步骤 首先引入地址json数据,省市区,三级联动,该demo展示省市两级联动,三级联动同理. 样式可以进行自定义. <section class="mySetti ...
- 小程序中获取屏幕高度
屏幕高度问题 小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息 wx.getSystemInfo中有3个高度,分别是: screenHeight: ...
- 小程序中获取屏幕高度及iPhoneX适配问题
屏幕高度问题 小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息 wx.getSystemInfo中有3个高度,分别是: screenHeight: ...
- android屏幕密度高度,Android获取常用辅助方法(获取屏幕高度、宽度、密度、通知栏高度、截图)...
我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就分享一下Android中常用的一些辅助方法: 获取屏幕高度: /** * 获得屏幕高度 * @para ...
- 原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
最新文章
- 面对这些情况,要勇于说“不​”
- JAVA基础-常用的其他类
- asp.net mvc 使用bootstrap的模态框插件modal
- 理解浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
- Saving Beans HDU - 3037(卢卡斯定理)
- C语言orC++,最大的区别?
- 学习一门编程语言的基本步骤
- java 实现数据结构之队列
- 嵌入式linux的学习笔记-pipe管道(二)
- 排序算法(7)----桶排序
- 手机内存占用超过一半会不会卡?
- Linux查看系统glibc版本号
- python中字符编码:coding utf-8, unicde, defaultencoding, UnicodeDecodeError, UnicodeEncodeError
- mflac格式解密_如何解密QQ音乐的MFLAC和MGG格式
- js html title属性,HTML DOM title 属性
- Win32多语言IME开发概述
- 《勒索软件防护体系建设指南》发布|美创深度参编,入选代表性厂商
- 【AC.HASH】OpenHarmony啃论文俱乐部——哈希技术:综述和分类(译)
- 2s-AGCN论文理解
- 【信息收集】用python获取IP信息(六)
热门文章
- 爱立信软件测试实习生面试
- 故障处理 软件 需求_如何做软件FMEA?
- IP切换器是做什么用的?
- handlersocket mysql_Mysql插件之HandlerSocket的安装、配置、使用
- FastStone Capture 9.3 汉化绿色便携版 - 极品屏幕截图工具
- 让Google earth叠加中文地图
- Microsoft store下载速度缓慢
- 加入收藏和设为首页JQuery代码
- asp.net-DirectoryEntry基本操作入门
- nvme linux读写测试工具,不同硬件平台(intel/AMD)和不同OS/FS/测试工具下NVMe SSD性能简测...