Javascript、Jquery获取浏览器和屏幕各种高宽集合

飘逸的风10年前 (2016-03-21)前端5495

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

 

Jquery

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());                         //获取滚动条到左边的垂直宽度 

备注:如果document.body.*获取不到时,就要使用这样:

var t = document.documentElement.* || document.body.*获取


元素距离页面顶部距离:

jQuery
$("#elt_id").offset().top;

Javascipt
document.getElementById("elt_id").offsetTop;

 

例子:

聊天室发送内容后自动滚动到最底部:

/*

html

<div id="'liaotianAjax'">我是聊天内容</div>

*/

$(function(){

    // 获取消息

    liaotianGoBottom();

});

function liaotianGoBottom() {

    e = document.getElementById('liaotianAjax');

    e.scrollTop=e.scrollHeight;

}

 

更多效果:

https://www.jb51.net/article/32679.htm

 

相关文章

实现jQuery扩展总结

开发自己需要的jQuery插件,看个示例说明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://...

JS键盘控制翻页代码

<script language="javascript"> <!-- document.onkeydown=nextpage var prevpage="prev.html"...

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相...

jQuery操作Select的方法集合

jQuery获取Select选择的Text和Value:  语法解释:  1. $("#select_id").change(function(){/...

html+css 中 em和px 的尺寸解释

px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默...

jQuery动态改变图片显示大小(完美兼容全部)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。