Maison > Article > interface Web > Résumé des méthodes permettant d'obtenir la largeur et la hauteur d'une page Web à l'aide des compétences javascript_javascript
document.body.clientWidth - la largeur de la zone visible de la page Web
document.body.clientHeight - la hauteur de la zone visible de la page Web
document.body.offsetWidth - la largeur de la zone visible de la page Web, y compris la largeur des bords et des barres de défilement
document.body.offsetHeight - la hauteur de la zone visible de la page Web, y compris la hauteur des bords et des barres de défilement [FF, chrom est la hauteur de la page entière, IE Opera est normal]
document.body.scrollWidth - la largeur totale de la page Web
document.body.scrollHeight - la hauteur totale de la page Web
document.body.scrollTop - Lorsqu'il y a une barre de défilement, faites glisser la barre de défilement vers le bas et la hauteur de la partie qui n'est pas affichée au dessus
document.body.scrollLeft - Comme ci-dessus
window.innerHeight - La hauteur intérieure de la fenêtre du navigateur
window.innerWidth - La largeur intérieure de la fenêtre du navigateur
window.screenTop - la distance entre le haut du document Web et le haut de l'écran sur la partie texte de la page Web, mais FF ne la prend pas en charge, Chrom, IE et Opera se comportent différemment, utilisez donc with. attention]
window.screenLeft - Le côté gauche du texte de la page Web [la distance entre l'extrême gauche du document de la page Web et l'extrême gauche de l'écran, mais Chrom, IE et Opera se comportent différemment, utilisez-le donc. avec prudence]
window.screen.height - la hauteur de la résolution de l'écran
window.screen.width - la largeur de la résolution de l'écran
window.screen.availHeight - hauteur de la zone de travail disponible [écran entier mais sans la barre des tâches inférieure]
window.screen.availWidth - Largeur de la zone de travail disponible [largeur de tout l'écran]
window.screen.clorDepth - couleur de l'écran, couramment utilisée 16, 32 bits, etc.
window.screen.deviceXDPI - pixels d'écran/pouce [pris en charge par IE, non pris en charge par d'autres]
Méthode JavaScript pour obtenir la largeur et la hauteur de la page
<script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文全文宽:"+ document.body.scrollWidth; s += " 网页正文全文高:"+ document.body.scrollHeight; s += " 网页被卷去的高(ff):"+ document.body.scrollTop; s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop; s += " 网页被卷去的左:"+ document.body.scrollLeft; s += " 网页正文部分上:"+ window.screenTop; s += " 网页正文部分左:"+ window.screenLeft; s += " 屏幕分辨率的高:"+ window.screen.height; s += " 屏幕分辨率的宽:"+ window.screen.width; s += " 屏幕可用工作区高度:"+ window.screen.availHeight; s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; //alert (s); } getInfo(); </script>
Dans mon test local :
Peut être utilisé sous IE, FireFox et Opera
document.body.clientWidth document.body.clientHeight
Vous pouvez l’obtenir dès maintenant, c’est très simple et pratique.
Et parmi les projets d'entreprise :
Opera utilise toujours
document.body.clientWidth document.body.clientHeight
Mais IE et FireFox utilisent
document.documentElement.clientWidth document.documentElement.clientHeight
Il s’avère que ce sont les standards du W3C qui posent problème
958d744a298c46c0daa211c304ba8ee6
Si vous ajoutez cette ligne de balises à la page
Dans IE :
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度
Dans FireFox :
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度
Dans Opéra :
document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Et s'il n'y a pas de norme W3C définie, alors
IE est :
document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0
FireFox c'est :
L'Opéra c'est :
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.