iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >jquery怎么求屏幕的高度
  • 300
分享到

jquery怎么求屏幕的高度

屏幕 2023-05-14 22:05:36 300人浏览 泡泡鱼
摘要

本教程操作环境:windows10系统、Jquery3.2.1版、DELL G3电脑jquery怎么求屏幕的高度?js或jQuery获取当前屏幕的各种高度一、参考地址:js或jQuery获取当前屏幕的各种高度jquery监控浏览窗口尺寸变化

jquery怎么求屏幕的高度

教程操作环境:windows10系统、Jquery3.2.1版、DELL G3电脑

jquery怎么求屏幕的高度?

js或jQuery获取当前屏幕的各种高度

一、参考地址:

js或jQuery获取当前屏幕的各种高度

jquery监控浏览窗口尺寸变化执行相应的代码

二、

1、javascript:

网页可见区域宽: 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

2、JQuery:

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

三、窗口大小改变时

$(window).resize(function(){
   //执行代码块
});

四、点击返回顶部

$('.Go_top').click(function(){
    if ($(window).scrollTop() > 0) {
    $("html,body").stop().animate({ scrollTop: 0 }, 200);
}
});
$(window).scroll(function(){
    var w_h = $(document).scrollTop();
    if(w_h>300){
        $('.go_top').fadeIn();
    }
    if(w_h<=300){
        $('.go_top').fadeOut();
    }
});

以上就是jquery怎么求屏幕的高度的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: jquery怎么求屏幕的高度

本文链接: https://www.lsjlt.com/news/206979.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery怎么求屏幕的高度
    本教程操作环境:Windows10系统、jquery3.2.1版、DELL G3电脑jquery怎么求屏幕的高度?js或jQuery获取当前屏幕的各种高度一、参考地址:js或jQuery获取当前屏幕的各种高度jquery监控浏览窗口尺寸变化...
    99+
    2023-05-14
    屏幕
  • jquery如何求屏幕的高度
    这篇“jquery如何求屏幕的高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery如何求屏幕的高度”文章吧。jqu...
    99+
    2023-07-05
  • jquery怎么获取屏幕宽高
    这篇文章主要介绍了jquery怎么获取屏幕宽高的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery怎么获取屏幕宽高文章都会有所收获,下面我们一起来看看吧。具体方法如下:获取当前窗口可视区域宽度$(wind...
    99+
    2023-06-04
  • jquery如何获取屏幕宽高
    使用jquery获取屏幕宽高的方法:1.使用$(window).width()获取当前窗口可视区域宽度;2.使用$(window).height()获取当前窗口可视区域高度;3.使用$(document).width()获取当前窗口文档对象...
    99+
    2024-04-02
  • jquery如何求高度
    这篇文章主要介绍“jquery如何求高度”,在日常操作中,相信很多人在jquery如何求高度问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery如何求高度”的疑惑有所帮...
    99+
    2024-04-02
  • JS与Jquery如何获取屏幕、浏览器、页面的宽度和高度
    今天小编给大家分享一下JS与Jquery如何获取屏幕、浏览器、页面的宽度和高度的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-07-05
  • vue如何监听屏幕高度
    这篇文章主要介绍“vue如何监听屏幕高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue如何监听屏幕高度”文章能帮助大家解决问题。首先需要在data里面定义页面的高度data (){&...
    99+
    2023-07-04
  • jquery如何将标签元素高度设为屏幕的百分比
    小编给大家分享一下jquery如何将标签元素高度设为屏幕的百分比,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html部分:&l...
    99+
    2024-04-02
  • JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理
    一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。容器的...
    99+
    2023-02-11
    JS获取宽度和高度 Jquery获取宽度和高度
  • win10怎么调整屏幕亮度
    本篇内容主要讲解“win10怎么调整屏幕亮度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“win10怎么调整屏幕亮度”吧!具体操作:点击桌面左下角的开始。 点击控制面板。点击显示选项。 点击调整...
    99+
    2023-06-27
  • win7屏幕亮度怎么更改
    本文小编为大家详细介绍“win7屏幕亮度怎么更改”,内容详细,步骤清晰,细节处理妥当,希望这篇“win7屏幕亮度怎么更改”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。win7屏幕亮度更改教程很多电脑我们可以通过显...
    99+
    2023-07-01
  • win11怎么调整屏幕亮度
    要调整Windows 11的屏幕亮度,可以按照以下步骤操作:1. 打开“开始”菜单,点击右上角的“设置”图标。2. 在“设置”窗口中...
    99+
    2023-09-09
    win11
  • 微信小程序如何让页面高度为屏幕的高度
    微信小程序设置页面高度为屏幕高度的方法进入微信开发者工具,打开小程序项目文件,在项目文件中,查找并打开utlls/app.json文件;最后,app.json文件打开后,设置page的高度为100%即可;.page{height:100vh...
    99+
    2024-04-02
  • CSS中怎么检测高像素密度屏幕设备的样式
    CSS中怎么检测高像素密度屏幕设备的样式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 iPho...
    99+
    2024-04-02
  • win7电脑怎么设置屏幕亮度
    这篇文章主要介绍了win7电脑怎么设置屏幕亮度的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇win7电脑怎么设置屏幕亮度文章都会有所收获,下面我们一起来看看吧。win7电脑设置屏幕亮度的方法打开菜单栏的“控制面...
    99+
    2023-07-01
  • Win10系统怎么调整屏幕亮度
    本篇内容主要讲解“Win10系统怎么调整屏幕亮度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Win10系统怎么调整屏幕亮度”吧!Win10系统调整屏幕亮度的三种简单方法方法一: 在桌面左下角搜...
    99+
    2023-07-01
  • Android怎样获取屏幕、状态栏及标题栏的高度
    这篇文章主要介绍了Android怎样获取屏幕、状态栏及标题栏的高度,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在开始之前,先来看一张图:绿色区域:屏幕区域蓝色区域:状态栏区...
    99+
    2023-05-30
    android
  • Linux系统怎么调整屏幕亮度
    这篇文章的内容主要围绕Linux系统怎么调整屏幕亮度进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获!1.Calise处于时断时续的开发中,Calise...
    99+
    2023-06-28
  • jquery怎么修改高度
    使用jquery修改高度的方法:1.新建html项目,引入jquery;2.创建div标签,设置id属性;3.为标签设置宽高;4.添加button按钮,绑定onclick点击事件;5.通过id获取标签对象,使用css()方法修改宽高;具体步...
    99+
    2024-04-02
  • 小程序如何做自适应屏幕高度
    这篇文章主要讲解了“小程序如何做自适应屏幕高度”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序如何做自适应屏幕高度”吧!以前将小程序图片宽度设置为屏幕宽度:imageLoad: func...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作