Comment changer la taille de la vue en JavaScript

Dans le développement Web moderne, JavaScript est une technologie très importante qui peut fournir une interaction puissante et un comportement dynamique. Une application courante consiste à modifier la taille de la vue.

Dans une page Web, la taille d'affichage fait référence à la largeur et à la hauteur de la fenêtre ou de l'élément du navigateur. Ces tailles affectent la mise en page, le style et l'affichage du contenu. Grâce au code JavaScript, nous pouvons modifier ces tailles de manière dynamique pour obtenir une conception adaptative et réactive.

Voici quelques façons de modifier la taille de l'affichage à l'aide de JavaScript :

1. Utilisez les propriétés window.innerHeight et window.innerWidth

Ces deux propriétés renvoient la hauteur et la largeur de la fenêtre du navigateur. Nous pouvons lire ces propriétés via le code JavaScript et les appliquer aux éléments de la vue.

Par exemple, le code suivant définit la hauteur et la largeur d'un élément DIV en fonction de la taille de la fenêtre du navigateur :

var div = document.getElementById('myDiv');
div.style.height = window.innerHeight + 'px';
div.style.width = window.innerWidth + 'px';

2. Utilisation des requêtes multimédias CSS

Les requêtes multimédias CSS sont un moyen de définir des styles en CSS qui peuvent changer le style des éléments en fonction des caractéristiques et des attributs de l'appareil de l'utilisateur. Nous pouvons créer, modifier et appliquer ces requêtes multimédias à l'aide du code JavaScript.

Par exemple, le code suivant ajoutera une feuille de style à la page et définira une requête multimédia pour les appareils dont la largeur d'écran est supérieure à 600 px :

var style = document.createElement('style');
style.innerHTML = '@media screen and (min-width: 600px) { body { background-color: yellow; } }';

document.head.appendChild(style);

3. Utilisez l'événement resize

Lorsque la fenêtre du navigateur change de taille, parcourez le processeur déclenchera l'événement de redimensionnement. Nous pouvons modifier dynamiquement la taille et la disposition de la vue en écoutant cet événement.

Par exemple, le code suivant définit la hauteur d'un élément DIV à la moitié de la hauteur de la fenêtre du navigateur et centre sa position horizontalement :

var div = document.getElementById('myDiv');

function resizeHandler() {
  div.style.height = window.innerHeight / 2 + 'px';
  div.style.left = (window.innerWidth - div.offsetWidth) / 2 + 'px';
}

window.addEventListener('resize', resizeHandler);

// 初始调用一次以确保视图始终处于正确的大小和位置
resizeHandler();

Avec la méthode ci-dessus, nous pouvons facilement utiliser JavaScript pour modifier la taille de la vue afin de l'adapter à différents Besoins des équipements et des utilisateurs. Cela constitue un moyen très pratique pour concevoir des sites Web réactifs et adaptatifs.

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!