Maison  >  Article  >  interface Web  >  Comprendre brièvement l'application de l'objet window.screen

Comprendre brièvement l'application de l'objet window.screen

WBOY
WBOYoriginal
2022-08-05 10:34:251825parcourir

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à l'application de l'objet window.screen. L'objet window.screen contient des informations sur l'écran de l'utilisateur. J'espère que ce sera le cas. être utile à tout le monde.

Comprendre brièvement l'application de l'objet window.screen

【Recommandations associées : Tutoriel vidéo javascript, front-end web

Objet fenêtre

Tous les navigateurs prennent en charge l'objet fenêtre. Il représente la fenêtre du navigateur.

Tous les objets globaux, fonctions et variables JavaScript deviennent automatiquement membres de l'objet fenêtre.

Les variables globales sont des propriétés de l'objet fenêtre.

Les fonctions globales sont des méthodes de l'objet window.

Même le document du DOM HTML est l'une des propriétés de l'objet window :

window.document.getElementById("header");

Identique à :

document.getElementById("header");

Taille de la fenêtre

Il existe trois façons de déterminer la taille de la fenêtre du navigateur (la fenêtre d'affichage du navigateur , à l'exclusion des barres d'outils et des barres de défilement).

Pour Internet Explorer, Chrome, Firefox, Opera et Safari :

window.innerHeight - La hauteur intérieure de la fenêtre du navigateur window.innerWidth - La largeur intérieure de la fenêtre du navigateur

Pour Internet Explorer 8, 7, 6, 5 :

document.documentElement.clientHeight document.documentElement.clientWidth

ou

document.body.clientHeight document.body.clientWidth

Solution JavaScript pratique (couvre tous les navigateurs) :

Exemple

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Cet exemple montre la hauteur et la largeur de la fenêtre du navigateur : (hors barres d'outils/barres de défilement)

Écran de la fenêtre

fenêtre Le . L'objet screen contient des informations sur l'écran de l'utilisateur.

L'objet window.screen peut être écrit sans le préfixe window.

Quelques propriétés :

  • screen.availWidth - Largeur d'écran disponible

  • screen.availHeight - Hauteur d'écran disponible

Window Screen La propriété screen.availWidth renvoie la largeur disponible de l'écran du visiteur Largeur, en pixels, moins les fonctionnalités de l'interface telles que la barre des tâches de la fenêtre.

Instance

Renvoie la largeur disponible de votre écran :

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

La sortie du code ci-dessus est :

Comprendre brièvement lapplication de lobjet window.screen

Hauteur disponible de l'écran de la fenêtre

la propriété screen.availHeight renvoie la hauteur de l'écran du visiteur en pixels, moins les fonctionnalités de l'interface telles que la barre des tâches de la fenêtre.

Instance

Renvoie la hauteur disponible de votre écran :

<script>
document.write("可用高度: " + screen.availHeight);
</script>

Le code ci-dessus affichera :

Comprendre brièvement lapplication de lobjet window.screen

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn