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

飘逸的风11年前 (2016-03-21)前端5571

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

 

相关文章

JS对cookie的操作

1、设置cookie 01 function addCookie(objName, objValue, objHours) { //添加cookie 02...

js判断undefined类型,undefined,null,NaN的区别

js判断undefined类型 今天使用showModalDialog打开页面,返回值时。当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined 所以自作聪明判断&nb...

jQuery 滚动鼠标中键图片自动改变大小(统一控制)

今天维护一个项目,需要对内容里的图片通过图片中间控制大小。由于是以前完成的,客户之前也没有提出要求,所以对已经添加后的数据没办法在一个个地在图片上加函数。网上查找了一下控制中键的资料,终于找到解决办法...

JS设为首页加入收藏兼容特效

废话不多说,上代码: // 添加到收藏夹 function AddFavorite(sURL, sTitle) { try { if (typeof(sURL) == "undefi...

jquery简单代码实现复选框多选、单选、全不选功能,很实用

<html> <head>  <script type="text/javascript" src="https://code.jquery.com/jqu...

jquery 事件方法总结

Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"te...

发表评论

访客

看不清,换一张

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