|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
$(window).width()與window.innerWidth的區(qū)別
作者:admin 時間:2015-9-16 7:37:1 瀏覽:近日把網(wǎng)站改為自適應，需要用到一部分js和jquery程序，由于要考慮到各瀏覽器的兼容性，所以在調(diào)試上需要各位用心，并且在各函數(shù)的使用上也要比較謹慎。但是由于工作量繁多，會時常出現(xiàn)一些bug，要在使用時才可能被發(fā)現(xiàn)。今天，就發(fā)現(xiàn)了一個問題，在IE8打開網(wǎng)頁時，左下角有黃色警告提示，說明網(wǎng)頁JS有問題了。經(jīng)過一番搗鼓之后，發(fā)現(xiàn)原來是window.innerWidth這個寫法的問題，該寫法在IE8里原來是無效的，出現(xiàn)undefined錯誤提示。
window.innerWidth能獲得什么數(shù)據(jù)？
在自適應設計中，需要用js來判斷瀏覽器寬度，從而調(diào)整網(wǎng)頁寬度和布局，我一開始用的是window.innerWidth。
window.innerWidth能獲取當前窗口的寬度(包含滾動條)，當瀏覽器寬度調(diào)整時，這個值也會跟著變化。
但是，window.innerWidth在IE8瀏覽器是無效的。所以，需要使用一個代替品，那就是$(window).width()。
$(window).width()與window.innerWidth有什么區(qū)別？
$(window).width()也是獲得瀏覽器寬度的方法，但它跟window.innerWidth是不同的。
1）$(window).width()需要引用jquery.js文件，它是jquery方法。而window.innerWidth是js方法，不需要引用jquery.js文件。
2）它們獲取的數(shù)值是不同的，window.innerWidth獲取當前窗口的寬度(包含滾動條)，$(window).width()獲取當前窗口的寬度(不包含滾動條)?？聪聢D所示：
$(window).width()與window.innerWidth的區(qū)別
知識擴展
Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度
Javascript:
alert(document.body.clientWidth); //網(wǎng)頁可見區(qū)域?qū)?body)
alert(document.body.clientHeight); //網(wǎng)頁可見區(qū)域高(body)
alert(document.body.offsetWidth); //網(wǎng)頁可見區(qū)域?qū)?body)，包括border、margin等
alert(document.body.offsetHeight); //網(wǎng)頁可見區(qū)域?qū)?body)，包括border、margin等
alert(document.body.scrollWidth); //網(wǎng)頁正文全文寬，包括有滾動條時的未見區(qū)域
alert(document.body.scrollHeight); //網(wǎng)頁正文全文高，包括有滾動條時的未見區(qū)域
alert(document.body.scrollTop); //網(wǎng)頁被卷去的Top(滾動條)
alert(document.body.scrollLeft); //網(wǎng)頁被卷去的Left(滾動條)
alert(window.screenTop); //瀏覽器距離Top
alert(window.screenLeft); //瀏覽器距離Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的寬
alert(window.screen.availHeight); //屏幕可用工作區(qū)的高
alert(window.screen.availWidth); //屏幕可用工作區(qū)的寬
Jquery:
alert($(window).height()); //瀏覽器當前窗口可視區(qū)域高度
alert($(document).height()); //瀏覽器當前窗口文檔的高度
alert($(document.body).height()); //瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前窗口可視區(qū)域?qū)挾?/p>
alert($(document).width()); //瀏覽器當前窗口文檔對象寬度
alert($(document.body).width()); //瀏覽器當前窗口文檔body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度 包括border padding margin
實例
<!DOCTYPE html>
<script src="http://howtostagehomes.com/js/lib/jquery.js" type="text/javascript" ></script>
<html>
<head>
<title>Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度</title>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p>Welcome to aaa</p>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
</body>
</html>
<script type="text/javascript">
var str = "document.body.clientWidth="+document.body.clientWidth+"\n";
str = str + "document.body.clientHeight="+document.body.clientHeight+"\n";
str = str + "document.body.offsetWidth="+document.body.offsetWidth+"\n";
str = str + "document.body.offsetHeight="+document.body.offsetHeight+"\n";
str = str + "document.body.scrollWidth="+document.body.scrollWidth+"\n";
str = str + "document.body.scrollHeight="+document.body.scrollHeight+"\n";
str = str + "document.body.scrollTop="+document.body.scrollTop+"\n";
str = str + "document.body.scrollLeft="+document.body.scrollLeft+"\n";
str = str + "window.screenTop="+window.screenTop+"\n";
str = str + "window.screenLeft="+window.screenLeft+"\n";
str = str + "window.screen.height="+window.screen.height+"\n";
str = str + "window.screen.width="+window.screen.width+"\n";
str = str + "window.screen.availHeight="+window.screen.availHeight+"\n";
str = str + "window.screen.availWidth="+window.screen.availWidth;
alert(str);
</script>
- 站長推薦
