JS实时获取浏览器窗口尺寸 .

给div实时设置宽度

<div id="detail" style="width: 100%; overflow: scroll;">

</div>

 

<script type="text/javascript">
    var winWidth = 0;
    var winHeight = 0;
    function findDimensions() //函数：获取尺寸
    {
        //获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        //获取窗口高度
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
        }
        //跟div赋值
        var detail = document.getElementById("detail");
        detail.style.width = winWidth-4;
    }
    findDimensions();
    //调用函数，获取数值
    window.onresize = findDimensions;
</script>

 

上边在ie下正常，下边的修改可以兼容火狐

<script type="text/javascript">
    var winWidth = 0;
    function findDimensions() //函数：获取尺寸
    {
        //获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        //通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

            winWidth = document.documentElement.clientWidth;
        }
        //跟div赋值
        var detail = document.getElementById("detail");
        detail.style["width"] = winWidth - 4 + "px";
    }
    findDimensions();
    //调用函数，获取数值
    window.onresize = findDimensions;
</script>

转载于:https://www.cnblogs.com/waliy/p/3946060.html