日期:2014-05-16  浏览次数:20312 次

js获取网页宽高
【1问题】 js怎么获取页面的宽高等要素。
【2问题】 当页面大小变化时页面元素怎么随之变化。
【3示例】代码示例:(附件中含完整示例)
function gets(){
var s ="网页可见区域宽:"+ document.body.clientWidth; 
s += "<br>网页可见区域高:" + document.body.clientHeight; 
s += "<br>网页可见区域宽:" + document.body.offsetWidth +" (包括边线的宽)"; 
s += "<br>网页可见区域高:" + document.body.offsetHeight +" (包括边线的宽)"; 
s += "<br>网页正文全文宽:" + document.body.scrollWidth; 
s += "<br>网页正文全文高:" + document.body.scrollHeight; 
s += "<br>网页被卷去的高:" + document.body.scrollTop; 
s += "<br>网页被卷去的左:" + document.body.scrollLeft; 
s += "<br>网页正文部分上:" + window.screenTop; 
s += "<br>网页正文部分左:" + window.screenLeft; 
s += "<br>屏幕分辨率的宽:" + window.screen.width; 
s += "<br>屏幕分辨率的高:" + window.screen.height; 
s += "<br>屏幕可用工作区宽度:" + window.screen.availWidth; 
s += "<br>屏幕可用工作区高度:" + window.screen.availHeight;
document.getElementById('mydiv').innerHTML = s;
}
window.onresize=gets;

【4结论】
获取页面的宽高可用body.clientWidth,body.clientHeight等代码获取

当页面大小变化时,html标签中有一部分可以随之变化,比如:center。用js代码控制页面元素大小,比如此页面中的:window.onresize=gets;