Explication détaillée de l'utilisation de js/jquery pour obtenir la hauteur et la largeur de la barre de défilement du navigateur

Obtenez la hauteur et la largeur de la zone visible de la fenêtre du navigateur. Les amis qui ont besoin de la hauteur de la barre de défilement peuvent s'y référer.

Dans IE, la taille de la fenêtre d'affichage du navigateur ne peut être obtenue que comme suit : Copiez le code comme suit

document.body.offsetWidth 
document.body.offsetHeight

Dans les navigateurs qui déclarent DOCTYPE, vous pouvez utiliser ce qui suit pour obtenez la taille de la fenêtre d'affichage de navigation de l'appareil : copiez le code comme suit

document.documentElement.clientWidth 
document.documentElement.clientHeight

IE, FF et Safari prennent tous en charge cette méthode. Bien qu'Opera prenne en charge cet attribut, il renvoie la taille de la page
. En même temps, sauf IE Tous les navigateurs enregistrent ces informations dans l'objet fenêtre, qui peuvent être obtenues à l'aide du code suivant : Copiez le code comme suit

window.innerWidth 
window.innerHeight

Méthode générale d'obtention de la taille de la page Web entière Copiez le code comme suit : Copiez le code

document.body.scrollWidth 
document.body.scrollHeight

La méthode générale pour obtenir la hauteur de résolution de l'écran est la suivante : Copiez le code

window.screen.height 
window.screen.width

Résumez l'exemple

function getViewSizeWithoutScrollbar(){//不包含滚动条 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滚动条 
if(window.innerWidth){ 
return { 
width : window.innerWidth, 
height: window.innerHeight 
} 
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
return { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
}

Ci-joint est la méthode la plus couramment utilisée pour obtenir la largeur et la hauteur de la page entière (nécessite le framework jquery)

$(document).width() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).height();

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!