jquery怎么获取浏览器高度

获取浏览器的高度要有点计算，如下：

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 

 

// 获取页面的高度、宽度

function getPageSize() {

    var xScroll, yScroll;

    if (windowinnerHeight && windowscrollMaxY) {

        xScroll = windowinnerWidth + windowscrollMaxX;

        yScroll = windowinnerHeight + windowscrollMaxY;

    } else {

        if (documentbodyscrollHeight > documentbodyoffsetHeight) { // all but Explorer Mac    

            xScroll = documentbodyscrollWidth;

            yScroll = documentbodyscrollHeight;

        } else { // Explorer Macwould also work in Explorer 6 Strict, Mozilla and Safari    

            xScroll = documentbodyoffsetWidth;

            yScroll = documentbodyoffsetHeight;

        }

    }

    var windowWidth, windowHeight;

    if (selfinnerHeight) { // all except Explorer    

        if (documentdocumentElementclientWidth) {

            windowWidth = documentdocumentElementclientWidth;

        } else {

            windowWidth = selfinnerWidth;

        }

        windowHeight = selfinnerHeight;

    } else {

        if (documentdocumentElement && documentdocumentElementclientHeight) { // Explorer 6 Strict Mode    

            windowWidth = documentdocumentElementclientWidth;

            windowHeight = documentdocumentElementclientHeight;

        } else {

            if (documentbody) { // other Explorers    

                windowWidth = documentbodyclientWidth;

                windowHeight = documentbodyclientHeight;

            }

        }

    }       

    // for small pages with total height less then height of the viewport    

    if (yScroll < windowHeight) {

        pageHeight = windowHeight;

    } else {

        pageHeight = yScroll;

    }    

    // for small pages with total width less then width of the viewport    

    if (xScroll < windowWidth) {

        pageWidth = xScroll;

    } else {

        pageWidth = windowWidth;

    }

    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

    return arrayPageSize;

}

 

// 滚动条

documentbodyscrollTop;

$(document)scrollTop();

1、npm i less --save-dev 把less源码安装到开发环境

/ less文件是通过lessloaderjs 来编译成css最后加载到页面中的 /

2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）

3、lessc -v 查看版本

4、在mainjs  import less from 'less'  Vueuse(less)

5、独立的vue文件需要引入less <style lang="less"></style>

less中变量的使用 定义方式：@key:value; 使用方式：@key;

字符串拼接变量使用方式 @img:'/img/'; background:url("@{img}1png")

写减法的时候左右要加空格，否则会理解为杠-

多层嵌套+变量计算；

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<style lang="less">

@k:100px;

box1{

    width: @k;

    height:@k;

    background: red;

    box2{

        width: @k/2;

        height:@k/2;

        background: green;

        box3{

            width: @k/3;

            height:@k/3;

            background: blue;

        }

    }

}

</style>

混合 = 函数

<div class="box1">我是box1</div>

<div class="box2">我是box2</div>

<style lang="less">

//定义一个函数；

test(@color:red,@size:14px){

    background: @color;

    font-size:@size;

}

box1{

//  不传参，使用默认的；

    test()

}

box2{

//  给函数传参；

    test(@color:green,@size:30px)

}

</style>

运算符

可以对高度、宽度、角度进行计算；

<ul>

    <li v-for="item in 4">{{item}}</li>

</ul>

<style lang="less" scoped>

  @k:10px;

    ul{

        list-style: none;

          li{

              border:1px solid ;

              margin:10px 0 ;

          }

            li:nth-child(1){

                width: @k + @k;

                height:@k;

            }

            li:nth-child(2){

                width: @k -5px;

                height:@k;

            }

            li:nth-child(3){

                width: @k @k;

                height:@k;

            }

            li:nth-child(4){

                width: @k / 2;;

                height:@k;

            }

    }

</style>

思路：先用js动态获取屏幕宽度，计算出html相应的 fontsize，==>>得到1rem

再利用 less的计算属性，算出应该为多少rem 760px/1rem = 多少rem

>

function multiplication() { var result=""; for(var i = 1;i < 10;i ++) { for(var j=1;j<=i;j++) { result += j + "" + i + "=" + (ij) + " "; } result += "

"; } documentwrite(result); }

$(window)height();//是文档窗口高度

$("div")offset()top//是标签距离顶部高度（没有到下面的距离，比如$("div")offset()down）

$("div")offset()left//是标签距离右边高度（没有到下面的距离，比如$("div")offset()right）

$(document)scrollTop();//是滚动条高度

$("div")height();//是标签高度

你要的高度+$("div")height()+[$("div")offset()top-$(document)scrollTop()]=$(window)height();

经过简单的数学变换即可得到你要的值了

获取页面某一元素的绝对X,Y坐标，可以用offset()：

var X = $(‘#DivID’)offset()top;

var Y = $(‘#DivID’)offset()left;

获取相对(父元素)位置:

var X = $(‘#DivID’)position()top;

var Y = $(‘#DivID’)position()left;

通过getBoundingClientRect方法获取对象位置，包含： left , top , right , bottom 4个参数值。

以上就是关于jquery怎么获取浏览器高度全部的内容，包括:jquery怎么获取浏览器高度、less使用、移动端适配之less动态计算等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！