jquery获取浏览器和屏幕的高度和宽度
1、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery获取浏览器和屏幕的高度和宽度</title>
<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
<style>
body,html{
100%;
height: 100%;
font-family: "微软雅黑";
font-size: 12px;
font-feature-settings: normal;
font-kerning: initial;
}
table{
border-collapse: collapse;
border: 1px dashed #CCCCCC;
60%;
font-size: 16px;
font-family: "arial, helvetica, sans-serif";
}
table tr{
border: 1px dotted #CCCCCC;
font-size: 16px;
font-family: "arial rounded mt bold";
}
table td,input{
border: 1px double #CCCCCC;
font-size: 28px;
font-family: "agency fb";
background-origin: border-box;
}
#heightWidth{
border: 1px groove #000;
font: "微软雅黑";
font-size: 20px;
font-stretch: expanded;
font-size-adjust: initial;
font-synthesis: initial;
backface-visibility: visible;
background-color: #000000;
color: #FFFFFF;
font-weight: bolder;
fill-opacity: opacity-value;
}
</style>
<script>
$(document).ready(function(){
$("#heightWidth").click(function(){
//获取浏览器当前窗口可视区域高度
var winHeight = $(window).height();
//获取浏览器当前窗口可视区域宽度
var winWidth = $(window).width();
//获取当前窗口文档的高度
var docHeight = $(document).height();
//获取当前窗口文档的宽度
var docWidth = $(document).width();
//获取当前窗口文档body的高度
var docBodyHeight = $(document.body).height();
//获取当前窗口文档body的宽度
var docBodyWidth = $(document.body).width();
//获取浏览器当前窗口文档body的总高度
var allHeight = $(document.body).outerHeight(true);
//获取浏览器当前窗口文档body的总宽度
var allWidth = $(document.body).outerWidth(true);
$("#winHeight").val(winHeight);
$("#winWidth").val(winWidth);
$("#docHeight").val(docHeight);
$("#docWidth").val(docWidth);
$("#docBodyHeight").val(docBodyHeight);
$("#docBodyWidth").val(docBodyWidth);
$("#allHeight").val(allHeight);
$("#allWidth").val(allWidth);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<label for="winHeight">获取浏览器当前窗口可视区域高度</label>
</td>
<td>
<input type="text" id="winHeight" />
</td>
</tr>
<tr>
<td>
<label for="winWidth">获取浏览器当前窗口可视区域宽度</label>
</td>
<td>
<input type="text" id="winWidth" />
</td>
</tr>
<tr>
<td>
<label for="docHeight">获取当前窗口文档的高度</label>
</td>
<td>
<input type="text" id="docHeight" />
</td>
</tr>
<tr>
<td>
<label for="docWidth">获取当前窗口文档的宽度</label>
</td>
<td>
<input type="text" id="docWidth" />
</td>
</tr>
<tr>
<td>
<label for="docBodyHeight">获取当前窗口文档body的高度</label>
</td>
<td>
<input type="text" id="docBodyHeight" />
</td>
</tr>
<tr>
<td>
<label for="docBodyWidth">获取当前窗口文档body的宽度</label>
</td>
<td>
<input type="text" id="docBodyWidth" />
</td>
</tr>
<tr>
<td>
<label for="allHeight">获取浏览器当前窗口文档body的总高度</label>
</td>
<td>
<input type="text" id="allHeight" />
</td>
</tr>
<tr>
<td>
<label for="allWidth">获取浏览器当前窗口文档body的总宽度</label>
</td>
<td>
<input type="text" id="allWidth" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" id="heightWidth" value="获取高度和宽度" />
</td>
</tr>
</table>
</body>
</html>
2、实现结果
