一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小)

alert(window.screen.width );//浏览设备的分辨率(电脑、手机、平板等)
alert(window.screen.availWidth
);//浏览设备的实际可用宽度(电脑、手机、平板等)
alert(window.innerWidth);//浏览器的可用(内部)宽度(包括滚动条等)[ie不支持]
alert(document.documentElement.clientWidth ||
document.body.clientWidth);//浏览器实际的可用文档宽度【兼容ie】

一、常见的关于浏览器宽高相关问题:

1.对于IE9+、chrome、firefox、Opera、Safari:

document.body.clientWidth:

1. 获取浏览器的宽高,不包括工具栏和滚动条即可视区的宽高

1)对于IE9+、chrome、firefox、Opera、Safari:
window.innerHeight浏览器窗口的内部高度;
window.innerWidth浏览器窗口的内部宽度;
2 ) 对于IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;
document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度;
或者,因为document对象的body属性对应HTML文档的<body>标签,所以也可表示为:
document.body.clientHeight:表示HTML文档所在窗口的当前高度;
document.body.clientWidth:表示HTML文档所在窗口的当前宽度;
结论:
document.body.clientWidth/Height:的宽高偏小,高甚至默认200;
document.documentElement.clientWidth/Height 和
window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案:
var
w = document.documentElement.clientWidth || document.body.clientWidth;
var
h = document.documentElement.clientHeight || document.body.clientHeight;

window.innerHeight浏览器窗口的内部高度;

    谷歌、火狐:body的实际显示宽度+padding

2.网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度
1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;
2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;
3.浏览器兼容代码:
var
w = document.documentElement.scrollWidth || document.body.scrollWidth;
var
h = document.documentElement.scrollHeight || document.body.scrollHeight;

window.innerWidth浏览器窗口的内部宽度;

    ie:body的实际显示宽度-border

3.网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

1.值: offsetWidth = scrollWidth + 左右滚动条 +左右边框;
    offsetHeight = scrollHeight + 上下滚动条 + 上下边框;
2.浏览器兼容代码:
var
w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var
h = document.documentElement.offsetHeight || document.body.offsetHeight ;

2.对于IE8.7.6.5:

 

4.网页卷去的距离与偏移量

1.``scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;
2.``scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;
3.``offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;
4.``offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;


document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;

document.body.offsetWidth:

二、当浏览器大小改变时自动刷新

这里是jquery插件方法:
$(window).resize(function(){ alert("窗体大小改变了!"); //location.reload() //这里你可以尽情的写你的刷新代码! });

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度;

    谷歌、火狐:body的实际显示宽度+padding+border

三、如何让table水平或者垂直拖动

主要是在table外面加上div以控制拖动。水平拖动的原理:div的宽度小于table的宽度,且div的overflow-x:scroll;
垂直拖动的原理:div的高度小于table的高度,且div的overflow-y:scroll;
如果不需要滚动overflow:hidden;
见如下代码:

1)水平拖动(自己体会,不美观,只有原理)

<div id="div_box" style="width:200px;overflow-x:scroll;">
<table style="width:400px;">
<thead>
    <tr>
      <th>单号</th>
      <th>时间</th>
      <th>地点</th>
      <th>事件</th>
      <th>人物</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>153151541</td>  
      <td>2018-01-01</td> 
      <td>某个城市的某个区的某个村的某个角落</td>   
      <td>发生了诡异的事情</td> 
      <td>张三,李四,王二麻子</td> 
    </tr>
     <tr>
      <td>153151541</td>  
      <td>2018-01-01</td> 
      <td>某个城市的某个区的某个村的某个角落</td>   
      <td>发生了诡异的事情</td> 
      <td>张三,李四,王二麻子</td> 
    </tr>
     <tr>
      <td>153151541</td>  
      <td>2018-01-01</td> 
      <td>某个城市的某个区的某个村的某个角落</td>   
      <td>发生了诡异的事情</td> 
      <td>张三,李四,王二麻子</td> 
    </tr>
     <tr>
      <td>153151541</td>  
      <td>2018-01-01</td> 
      <td>某个城市的某个区的某个村的某个角落</td>   
      <td>发生了诡异的事情</td> 
      <td>张三,李四,王二麻子</td> 
      </tr>
       <tr>
      <td>153151541</td> 
      <td>2018-01-01</td> 
      <td>某个城市的某个区的某个村的某个角落</td>   
      <td>发生了诡异的事情</td> 
      <td>张三,李四,王二麻子</td>
      </tr>
</tbody>
</table>
</div>

2)垂直拖动(不固定头部)

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        thead tr{ background: #eeeeee; }
        thead tr th { padding:5px 10px;border:1px solid #7C7C7C;width:150px;}
        tbody tr td{ border:1px solid #7C7C7C; text-align: center}
    </style>
</head>
<body>
<div id="div_box" style="height:200px;width:900px;overflow-y:scroll;border:1px solid grey;">
    <table style="height:400px;width:880px;border-collapse: collapse;">
        <thead>
        <tr>
            <th>单号</th>
            <th>时间</th>
            <th>地点</th>
            <th>事件</th>
            <th>人物</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>153151541</td>
            <td>2018-01-01</td>
            <td>某个城市的某个区的某个村的某个角落</td>
            <td>发生了诡异的事情</td>
            <td>张三,李四,王二麻子</td>
        </tr>
        <tr>
            <td>153151541</td>
            <td>2018-01-01</td>
            <td>某个城市的某个区的某个村的某个角落</td>
            <td>发生了诡异的事情</td>
            <td>张三,李四,王二麻子</td>
        </tr>
        <tr>
            <td>153151541</td>
            <td>2018-01-01</td>
            <td>某个城市的某个区的某个村的某个角落</td>
            <td>发生了诡异的事情</td>
            <td>张三,李四,王二麻子</td>
        </tr>
        <tr>
            <td>153151541</td>
            <td>2018-01-01</td>
            <td>某个城市的某个区的某个村的某个角落</td>
            <td>发生了诡异的事情</td>
            <td>张三,李四,王二麻子</td>
        </tr>
        <tr>
            <td>153151541</td>
            <td>2018-01-01</td>
            <td>某个城市的某个区的某个村的某个角落</td>
            <td>发生了诡异的事情</td>
            <td>张三,李四,王二麻子</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

3)垂直拖动(固定头部)

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .Box{ overflow:hidden;}
        .tableBox{ height:200px; width:300px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
        .tablehead{ position:absolute; width:300px; left:0;}
        .tablebody{ position:absolute; width:301px; height:200px; overflow-y:auto; overflow-x:hidden; top:24px; left:0;}
        td{ width:88px;white-space:normal;}
        table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
    </style>
</head>
<body>
<div class="Box">
    <div class="tableBox" >
        <div class="tablehead">
            <table class="head" border="1px">
                <tr>
                    <td>姓名</td><td>性别</td><td>年龄</td>
                </tr>
            </table>
        </div>
        <div class="tablebody">
            <table class="body" border="1px" >
                <tr><td>张家村里48号李家的李梅梅</td><td>女</td><td>18</td></tr>
                <tr><td>小张</td><td>男</td><td>15</td></tr>
                <tr><td>小美</td><td>女</td><td>12</td></tr>
                <tr><td>小弟</td><td>男</td><td>16</td></tr>
                <tr><td>五二</td><td>男</td><td>12</td></tr>
                <tr><td>王四</td><td>男</td><td>17</td></tr>
                <tr><td>张三</td><td>女</td><td>15</td></tr>
                <tr><td>小明</td><td>男</td><td>14</td></tr>
                <tr><td>李四</td><td>男</td><td>13</td></tr>
                <tr><td>七七</td><td>女</td><td>12</td></tr>
                <tr><td>九九</td><td>男</td><td>18</td></tr>
                <tr><td>麻子</td><td>男</td><td>12</td></tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

或者,因为document对象的body属性对应HTML文档的<body>标签,所以也可表示为:

    ie:body的实际显示宽度

document.body.clientHeight:表示HTML文档所在窗口的当前高度;

document.body.scrollWidth:

document.body.clientWidth:表示HTML文档所在窗口的当前宽度;

    谷歌、火狐:body的实际可用宽度+padding

结论:

    ie:body的实际可用宽度-border

document.body.clientWidth/Height:的宽高偏小,高甚至默认200;

注:在css设置body为2400px时body的实际宽度为2400+border+padding;而谷歌、火狐为2400px**

document.documentElement.clientWidth/Height 和 window.innerWidth/Height
的宽高始终相等。

 

所以在不同浏览器都实用的的Javascripit方案:

 

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

以下是收集其他作者的总结:

二:网页正文全文宽高

原文链接:

scrollWidth和scrollHeight获取网页内容高度和宽度

1.对于IE9+、chrome、firefox、Opera、Safari:

1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;

window.innerHeight浏览器窗口的内部高度;

2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;

window.innerWidth浏览器窗口的内部宽度;

3.浏览器兼容代码:

2.对于IE8.7.6.5:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;

二:网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度;

1.值:   offsetWidth =
scrollWidth + 左右滚动条 +左右边框;

或者,因为document对象的body属性对应HTML文档的<body>标签,所以也可表示为:

    offsetHeight = scrollHeight + 上下滚动条 + 上下边框;

document.body.clientHeight:表示HTML文档所在窗口的当前高度;

2.浏览器兼容代码:

document.body.clientWidth:表示HTML文档所在窗口的当前宽度;

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

结论:

三:网页卷去的距离与偏移量

document.body.clientWidth/Height:的宽高偏小,高甚至默认200;

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height
的宽高始终相等。

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;

所以在不同浏览器都实用的的Javascripit方案:

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;

var
w = document.documentElement.clientWidth || document.body.clientWidth;

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;

var
h = document.documentElement.clientHeight || document.body.clientHeight;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

二:网页正文全文宽高

您可能感兴趣的文章:

  • js实现楼层导航功能
  • 基于JS实现移动端向左滑动出现删除按钮功能
  • js实现带简单弹性运动的导航条
  • javascript
    网页进度条简单实例
  • javascript
    操作cookies详解及实例
  • js实现简易垂直滚动条
  • 微信小程序
    引用其他js文件实现代码
  • Javascript
    链式作用域详细介绍

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;

2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;

3.浏览器兼容代码:

var
w = document.documentElement.scrollWidth || document.body.scrollWidth;

var
h = document.documentElement.scrollHeight || document.body.scrollHeight;

二:网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

1.值:   offsetWidth = scrollWidth + 左右滚动条 +左右边框;

    offsetHeight = scrollHeight + 上下滚动条 + 上下边框;

2.浏览器兼容代码:

var
w = document.documentElement.offsetWidth || document.body.offsetWidth ;

var
h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三:网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;

相关文章