`
zccst
  • 浏览: 3319189 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery获取浏览器高度、宽度和滚动条高度

阅读更多
作者:zccst

遇到过一个问题,网页宽度大于浏览器宽度时出现横向滚动条。
希望,能够在打开浏览器时网页居中显示,而不是靠左。

解决办法:
if($(document).width() > $(window).width()){
    var w = ($(document).width() - $(window).width() ) / 2;
    $(document).scrollLeft(w);//设置为居中
}


查了一下资料,下面这几个高度和宽度的意义都是不同的,我曾因困在div的宽度里花了一个多小时的时间解决。


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

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度   
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    jquery 获取浏览器滚动条宽度数值

    jquery 获取当前浏览器滚动条宽度数值

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    jQuery获取浏览器窗口的宽度和高度

    首先,`$(window).height()` 和 `$(window).width()` 是用来获取浏览器当前窗口可视区域的高度和宽度,也就是用户在屏幕上看到的网页部分,不包括滚动条。例如,在提供的代码中,`$(window).height()` 返回的是267...

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...

    js获取浏览器高度和宽度值(多浏览器)

    例如,可以编写一个函数,根据浏览器类型选择合适的获取高度和宽度的方法。同时,随着现代浏览器对Web标准的支持逐渐增强,使用CSS3的`resize`事件和`window.innerWidth`、`window.innerHeight`等属性也能更方便地...

    jQuery 获取屏幕高度和宽度

    本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...

    用jquery制作设置浏览器水平横行滚动条样式产品

    本项目“用jQuery制作设置浏览器水平横行滚动条样式产品”旨在实现类似苹果官网的图片水平滚动条特效,为用户提供更优雅、流畅的浏览体验。 首先,我们需要理解jQuery的基本概念。jQuery是由John Resig创建的一个...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    在网页设计中,当页面内容超出了可视区域的宽度时,浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而,滚动条本身会占用一定的空间,这可能会导致页面宽度缩小,从而影响布局的整体美观性。为了不...

    jquery如何获取元素的滚动条高度等实现代码

    如文中所示,可以通过`$.browser.msie`判断浏览器类型,然后根据不同模式获取高度和宽度。但需要注意,`$.browser`已经在jQuery 1.9中被废弃,现代项目应使用其他方式处理浏览器兼容性问题,如使用`Modernizr`库或者...

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

    - 这两个属性分别用于获取可视区域的宽度和高度,不包括滚动条和边框。 2. **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**: - 这两个属性返回元素的宽度和高度,包括内容、内边距、边框...

    jquery很炫的滚动条效果

    在网页设计中,用户体验往往受到各种细节的影响,其中之一就是滚动条。一个美观且功能完善的滚动条可以提升网站的视觉效果和交互体验。...记得在实践中不断测试和优化,确保滚动条在各种设备和浏览器上都能正常工作。

    jQuery美化滚动条

    jQuery.nicescroll是一款轻量级、高度可定制的滚动条插件,它允许开发者通过简单的API调用来实现滚动条的自定义样式和功能。该插件支持多种浏览器,包括Chrome、Firefox、Safari、Edge和IE8+,使得网页在各种环境下...

    JQuery获取浏览器窗口内容部分高度的代码

    JQuery中的window对象是一个全局对象,它并不是用来获取浏览器窗口的高度的,而是用来处理浏览器窗口的一些全局属性和方法,如窗口位置、滚动条位置、窗口大小等。 要获取浏览器窗口内容部分的高度,我们通常使用的...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    浏览器窗口尺寸指的是整个浏览器窗口的大小,包括了页面内容、滚动条和其他元素。获取浏览器窗口的完整宽度和高度可以使用`window.outerWidth`和`window.outerHeight`。这两个属性包含了整个浏览器窗口的像素尺寸,...

    jQuery制作仿Mac Lion OS滚动条效果

    包括为容器设置宽度、高度、背景色等,并且对滚动条的滑块(slider)和其他元素设定相应的样式。 6. 插件调用方法:使用jQuery的“nanoScroller()”方法,开发者可以简单地应用插件到页面中带有“nano”类的所有...

    jquery修改滚动条样式

    在网页设计中,滚动条作为一个默认的用户交互元素,其样式通常由浏览器默认定义,但随着网页设计的个性化和用户体验的提升,自定义滚动条样式成为了一种趋势。`jQuery`,作为一款广泛使用的JavaScript库,提供了丰富...

    textarea自适应高度标签,去除难看的滚动条

    综合以上,我们可以创建一个插件,结合jQuery和CSS,实现`textarea`的高度自适应以及滚动条的优化。这个插件的目标是提供良好的用户体验,让用户在无需滚动条的情况下,也能舒适地查看和编辑多行文本,同时保持页面...

    jquery水平滚动条

    jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和方法来定制和增强滚动条效果,使其更加美观且符合用户体验。本篇文章将深入探讨如何使用jQuery实现水平滚动条,并介绍相关的知识点。 首先,我们需要理解...

Global site tag (gtag.js) - Google Analytics