js或者jquery如何实时获取浏览器的高度和宽度的

jquery

$(function(){

/调整窗口自动调整宽度/

$(window)resize(function(){

var h = $(window)height();

var w = $(window)width();

consoleinfo("窗口高度：" + h + "; 窗口宽度：" + w);

});

});

获取浏览器显示区域的高度 ： $(window)height();

获取浏览器显示区域的宽度 ：$(window)width();

获取页面的文档高度 ：$(document)height();

获取页面的文档宽度 ：$(document)width();

获取滚动条到顶部的垂直高度 ：$(document)scrollTop();

获取滚动条到左边的垂直宽度 ：$(document)scrollLeft();

计算元素位置和偏移量：$(id)offset();

offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results)

optionsrelativeTo指定相对计

算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

optionsscroll是否把

滚动条计算在内，默认TRUE

optionspadding是否把padding计算在内，默认false

optionsmargin

是否把margin计算在内，默认true

optionsborder是否把边框计算在内，默认true

子页面控制父页面：

parentdocumentdocumentElementscrollTop;

parentdocumentdocumentElementclientHeight;

<script type="text/javascript">

$(document)ready(function()

{

alert($(window)height()); //浏览器当前窗口可视区域高度

alert($(document)height()); //浏览器当前窗口文档的高度

alert($(documentbody)height());//浏览器当前窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器当前窗口可视区域宽度

alert($(document)width());//浏览器当前窗口文档对象宽度

alert($(documentbody)width());//浏览器当前窗口文档body的高度

alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

alert(screenheight);//显示器分辨率，只能用JavaScript代码获取

alert(screenwidth);

})

</script>

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

<style>

container {

}

blue {

height: 30px;

width: 60px;

background: burlywood;

margin-bottom: 1px;

}

</style>

<div class="container">

<div class="blue"></div>

<div class="blue"></div>

<div class="blue"></div>

<div class="blue"></div>

<div class="blue"></div>

<div class="blue"></div>

</div>

<script>

$(document)ready(function(){

$("blue:first")css("background","red");

});

</script>

很简单吧，举一反三，好好加油

windowonload=function(){

        waterfall();

        windowonscroll=function(){

    var parent=documentgetElementById("main");

    var boxs=getByClass(parent,"box");

    var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;

       var documentH=scrollH+documentdocumentElementclientHeight;

    var    lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);

       /763/

        if(lastH-350<documentH){      //这里的lastH不减掉350，就无法进入if语句？？？

                                /465/

dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};

for(var i=0;i<dataIntdatalength;i++){

        var divB=documentcreateElement("div");

        divBclassName="box";

        parentappendChild(divB);

        var divP=documentcreateElement("div");

        divPclassName="pic";

        divBappendChild(divP);

        myimg=documentcreateElement("img");

        myimgsrc="/images/"+dataIntdata[i]src;

        divPappendChild(myimg);

}

waterfall();

}

}

}

function waterfall(){

var oParent=documentgetElementById("main");

var boxs=getByClass(oParent,"box");

var boxW=boxs[0]offsetWidth;

var num=Mathfloor(documentdocumentElementclientWidth/boxW);

oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";

    boxHarr=new Array();

    for(var i=0;i<boxslength;i++){

        if(i<num){

            boxHarrpush(boxs[i]offsetHeight);

        }else{

            var minH=Mathminapply(null,boxHarr);

            var minHindex=getminHindex(boxHarr,minH);

            boxs[i]styleposition="absolute";

            boxs[i]styletop=minH+"px";

            boxs[i]styleleft=minHindexboxW+"px";

            //boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";

            boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;

        }

    }

}

function getByClass(parent,clsName){

    a=parentgetElementsByTagName('');

    var arr=[];

    for(var i=0;i<alength;i++){

        if(a[i]className==clsName){

            arrpush(a[i]);

        }

    }

    return arr;

}

function getminHindex(arr,minH){

    for(var i in arr){

        if(arr[i]==minH)

            return i;    

    }

}

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。

2、在indexhtml中的<script>标签，输入jquery代码：

$('body')append('height: ' + $(document)height() + '<br/>');

$('body')append('width: ' + $(document)width());

3、浏览器运行indexhtml页面，此时会打印出界面最大可以滚动的文档宽度和文档高度。

以上就是关于js或者jquery如何实时获取浏览器的高度和宽度的全部的内容，包括:js或者jquery如何实时获取浏览器的高度和宽度的、如何获取滚动条的高度 jquery、jquery怎么获取浏览器屏幕分辨率等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！