Kryss-nettleservindu Endre størrelse på JavaScript/jQuery

JavaScript støtter forskjellige funksjoner for å endre størrelse på tverrnettvinduet. For dette formålet har jQuery også innebygde metoder for å utføre størrelsesvinduoppgaven. JQuery er et godt strukturert og fullt omtalt bibliotek med JavaScript som kan utføre JS-koden effektivt.

I dette innlegget er to metoder tilpasset for å endre størrelsen på vinduet basert på JavaScript og jQuery. I den første metoden, AddEventListener () Metoden brukes for å trekke ut bredden så vel som høyden på vinduet Endre størrelse på nettleser. I den andre metoden, vindu.Endre størrelse () Metode beregner antall ganger nettleseren er endret størrelse. Nettleservinduet kan maksimeres eller minimeres avhengig av brukerens behov.

Dette innlegget tjener følgende læringsutbytte:

• Metode 1: Endre størrelse på vinduet ved hjelp av JavaScript
• Metode 2: Endre størrelse på vinduet ved hjelp av jQuery

Metode 1: Endre størrelse på vinduet ved hjelp av JavaScript

I JavaScript, AddEventListener metoden brukes ved å passere “Endre størrelse” verdi. Det returnerer Sidehøyde og Sidebredde av vinduet ved å maksimere eller minimere vinduet. Arrangementet utløses når nettleseren endrer størrelsen på vinduet. Dessuten kan brukeren spesifisere et element eller en velger for å påkalle Window Endre størrelse på hendelsen. Alle de siste nettleserne (Opera, Chrome, Edge, Safari, etc.) Støtt denne metoden.

Syntaksen til AddEventListener () -metoden (w.r.t til vinduets størrelse på vinduet) er gitt nedenfor:

Syntaks

vindu.AddEventListener ('Endre størrelse', funksjon)

Den ovennevnte syntaksen kan beskrives som

AddEventListener -metoden er bundet med 'Endre størrelse'Eiendom av vindu. Videre vil funksjonen bli kalt hvis vinduets størrelse blir oppdaget.

Eksempel

Følgende eksempelkode viser bruken av JavaScripts AddEventListener () -metode.

Kode

Eksempel på å endre størrelse på vinduet

> Sidebredde =>
> Sidehøyde =>

Beskrivelsen av ovennevnte kode er beskrevet her:

• En seksjon er spesifisert med tag der forskjellige stylingegenskaper som for eksempel bakgrunnsfarge, og bredde er nevnt.
• Etter det, Sidebredde og Sidehøyde av det gjeldende vinduet vises ved hjelp av spenn klasse, som brukes til å representere inlineinnhold.
• De vindu.AddEventListener () metoden utløses ved å passere Endre størrelse Verdi som et argument.
• Videre, a vise() metoden kalles innenfor Tagger. Bredden og høyden på vinduet oppdateres dynamisk med passeringsverdier .høyde og .bredde. Disse verdiene er assosiert med HTML -elementene.

Produksjon

Utgangen forklares her:

• En melding vises først med overskrift Tagger.
• Opprinnelig Sidebredde og Sidehøyde av det eksisterende vinduet er satt til 567 og 304 henholdsvis piksler.
• Verdiene til Sidebredde og Sidehøyde oppdateres i henhold til dimensjonen i det nåværende vinduet.

Metode 2: Endre størrelse på vinduet ved hjelp av jQuery

De vindu.Endre størrelse () metode for jQuery brukes for å trekke ut bredde og høyde av nettleseren. Den returnerer verdiene som viser hvor mange ganger vinduet har blitt endret ved å maksimere eller minimere det. Syntaksen til Endre størrelse () -metoden er gitt nedenfor:

Syntaks

$ (vindu).endre størrelse ();

De vindu element representerer at Endre størrelse Metoden blir brukt på vinduet. Du kan passere hvilken som helst funksjon som et argument til metoden for størrelse (). Ved å gjøre det utføres funksjonen ved å endre størrelsen på vinduet.

Eksempel

La oss forstå konseptet ved å bruke følgende eksempel.

Kode

Eksempel på å endre størrelse på nettleservinduet.

Endre størrelsen på vinduet omtrent> 0 ganger.

I denne koden:

• Først må du importere jQuery i Tagger.
• Etter det blir en variabel jeg initialisert med verdien 1.
• Etter det, dokument.klar() Metoden brukes til å sjekke om dokumentet er klart for størrelse på størrelse.
• I denne metoden, vindu.Endre størrelse () Metoden utføres som trekker ut innholdet i nettleservinduet ved hjelp av $ (“Span”).tekst eiendom.

Produksjon

Utgangen viser utførelsen av ovennevnte kode. Den viser en verdi som dynamisk oppdaterer med størrelsen på vindusskjermen. Det representerer antall ganger vinduet endrer størrelser.

Konklusjon

De AddEventListener () Metode for JavaScript rapporterer høyden og bredden på å endre størrelse på vinduer dynamisk. Mens vindu.Endre størrelse () Metode for jQuery Returnerer antall ganger vinduet blir maksimert eller minimert. Du har lært to forskjellige metoder for å oppdage Cross-Browser-vinduet Endre størrelse ved hjelp av jQuery og JavaScript.