JS获取各种屏幕的宽度和高度

这篇具有很好参考价值的文章主要介绍了JS获取各种屏幕的宽度和高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JS获取各种屏幕的宽度和高度
描述 用法
网页可见区域宽 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
client与offset为只读属性,scroll为可读写属性
属性 说明
clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
clientHeight 获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
offsetWidth 元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度
offsetHeight 元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度
scrollWidth 当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域
scrollHeight 当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域

文章来源地址https://www.toymoban.com/news/detail-427002.html

到了这里,关于JS获取各种屏幕的宽度和高度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

    首先 :我使用的是uniapp+ vue3语法: 问题 : 我出现这个问题是IOS 设备发现的,data.boxWidth为0 代码: 原因: 使用了 uni.createSelectorQuery() 来获取元素的宽度,然后在回调函数中设置 data.boxWidth 的值。然而, uni.createSelectorQuery() 方法是异步的 ,也就是说,它会在后台进行元素查

    2024年02月13日
    浏览(57)
  • Java:获取pdf中某一页的宽度和高度

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 一、背景介绍 二、用Java中的方法 三、用Python中的方法 总结 提示:以下是本篇文章正文内容,下面案例可供参考 金融业务,经常会涉及到合同盖章,那么盖章的时候就需要知道位置信息。比如第

    2024年01月25日
    浏览(46)
  • 微信小程序通过createSelectorQuery获取元素 高度,宽度与界面距离

    小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数 我们可以先编写这样一段代码 wxml 这里 我们定义了 多块 view 都用 行内样式设置了它的 高度和宽度 js编写代码如下 我们运行代码 并点击按钮 点击查看 这里 我们获取了所有 类名中包含 textIn 的元素 并输出 这里

    2024年02月05日
    浏览(63)
  • uniapp 获取 view 的宽度、高度以及上下左右左边界位置

    boundingClientRect 返回的 res 结果(以像素[px]为单位) 属性 类型 说明 id String 节点的 ID dataset Object 节点的 dataset left Number 节点的左边界坐标 right Number 节点的右边界坐标 top Number 节点的上边界坐标 bottom Number 节点的下边界坐标 width Number 节点的宽度 height Number 节点的高度 更多可参

    2024年02月12日
    浏览(70)
  • 详解织梦模板DedeCms获取缩略图的高度和宽度的代码

    某些瀑布流的代码要求图片必须带有高度,而织梦默认的缩略图仅仅是储存的图片路径,想要输出图片的高度就必须用别的办法,目前我只想到用getimagesize这个函数了,这也是相对比较简单的实现方案了, 但是在实际应用的过程中貌似有个问题,我也搞不懂是什么原因,具体

    2024年02月02日
    浏览(46)
  • 解决vue3+echarts关于无法获取dom宽度和高度的问题

    近期写vue3项目,很多地方都用到了echarts,刚开始写的时候,发现图一直出不来,报错/报警内容一般有两项: Uncaught (in promise) Error: Initialize failed: invalid dom. vue3 [ECharts] Can’t get DOM width or height. 分别解释一下这俩报错 第一个报错是在初始化echarts的时候,没有找到对应的dom元素

    2024年02月14日
    浏览(38)
  • 微信小程序 获取当前屏幕的可见高宽度

    很多时候我们做一下逻辑 需要用整个窗口的高度或宽度参与计算 而且很多时候我们js中拿到的单位都是px像素点 没办法和rpx同流合污 官方提供了wx.getSystemInfoSync() 可以获取到部分窗口信息 其中就包括了整个窗口的宽度和高度 wx.getSystemInfoSync().windowHeight 返回值为像素点 px 整个

    2024年01月16日
    浏览(62)
  • 在uniapp中,微信小程序获取胶囊的高度、宽度,且适配微信小程序、App

    H5: 微信小程序: 方法: 使用: 1、引入: 2、

    2024年02月05日
    浏览(66)
  • 在uniapp中获取到节点的位置信息等(高度、宽度、left、right、top、bottom等)

    在uniapp中我们有时候也会用到获取节点信息等操作,那么我们根据官方文档可以进行查阅,可以使用 uni.createSelectorQuery()进行操作 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。 Tips: 使用 uni

    2024年02月12日
    浏览(39)
  • 微信小程序如何及时获取页面循环元素的宽度、高度、距离左边值、函数自调、类似递归、闪屏、selectAll、exec、globalData、map、scroll-view

    distanceLeft :定义一个数组存储各个循环元素距离左边的值。 isPage :控制页面显示与隐藏。 scrollLeft :动态设置滚动距离。 isAactivity :存储 tabBar 对应 id 值。因为从 tabBar 页面跳转到 tabBar 页面时不能在路径上携带参数,所以此参数存储在全局变量中。 在微信小程序中使用

    2024年02月13日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包