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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2022-08-05 10:34:25
original
1927 Les gens l'ont consulté

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");
Copier après la connexion

Identique à :

document.getElementById("header");
Copier après la connexion

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
Copier après la connexion

ou

document.body.clientHeight document.body.clientWidth
Copier après la connexion

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;
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Derniers numéros
c++ appelle javascript
Depuis 1970-01-01 08:00:00
0
0
0
Qu’est-ce que le garbage collection JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Que sont les fonctions de hook JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Comment obtenir la date actuelle en JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal