Ventana innerWidth y innerHeight Propiedades en JavaScript

JavaScript innerWidth y innerHeight Propiedades : En este tutorial, vamos a aprender acerca de las propiedades innerWidth y innerHeight con ejemplos en JavaScript .

Sabemos que el objeto de la ventana en JavaScript tiene un montón de diferentes propiedades y métodos que se le atribuye.

    console.log(window);

Salida:

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
      $: ƒ $(id)
      Iframe: ƒ (a,b,c,d,e,f,g)
      IframeBase: ƒ (a,b,c,d,e,f,g,k)
      IframeProxy: ƒ (a,b,c,d,e,f,g)
      IframeWindow: ƒ (a,b,c,d,e,f,g)
      LocalNTP: ƒ LocalNTP()
      ToolbarApi: ƒ ()
      alert: ƒ alert()
      applicationCache: ApplicationCache {status: 0, oncached: null, onchecking: null, ondownloading: null, onerror: null, …}
      atob: ƒ atob()
      blur: ƒ ()
      btoa: ƒ btoa()
      caches: CacheStorage {}
      cancelAnimationFrame: ƒ cancelAnimationFrame()
      cancelIdleCallback: ƒ cancelIdleCallback()
      captureEvents: ƒ captureEvents()
      chrome: {embeddedSearch: {…}, loadTimes: ƒ, csi: ƒ}
      clearInterval: ƒ clearInterval()
      clearTimeout: ƒ clearTimeout()
      clientInformation: Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}
      close: ƒ ()
      closed: false
      closure_lm_665802: _.Ye {src: Window, b: {…}, f: 4}
      closure_uid_257079167: 1
      colorArrayToHex: ƒ colorArrayToHex(color)
      configData: {chromeColors: false, chromeColorsCustomColorPicker: false, enableShortcutsGrid: false, googleBaseUrl: "https://www.google.com/", hideShortcuts: false, …}
      confirm: ƒ confirm()
      createImageBitmap: ƒ createImageBitmap()
      crypto: Crypto {subtle: SubtleCrypto}
      customElements: CustomElementRegis
      …

Hay dos propiedades de este objeto ventana que hablaremos hoy: innerWidth y innerHeight .

    window.innerHeight;
      window.innerWidth;

salida

324
  1366

Como su nombre indica los propiedad innerHeight nos devuelve la altura de la ventana actual y los innerWidth propiedad nos devuelve la anchura de la ventana actual. Dado que estas propiedades se unen al tamaño de la ventana, cambiar el tamaño de sus valores debe cambiar. Cambiar el tamaño de la ventana de su navegador y ver estas propiedades de nuevo.

    window.innerHeight;
      window.innerWidth;

salida

166
  736

Por lo tanto, está claro que estas propiedades se unen a las dimensiones actuales de la ventana y cada vez que se cambia el tamaño de la ventana se obtiene un valor diferente.

Sin embargo, hay un pequeño class. Usted debe estar pensando cómo es que los valores de la altura catch son tan pequeñas si se encuentran en píxeles?

    window.outerHeight;
      window.innerHeight;

salida

728
  150

Al abrir una ventana fresca y tipos de éstos hacia fuera en la consola dev del navegador, recibo dos valores diferentes. Esto sugiere que debe haber alguna diferencia entre outerHeight y innerHeight propiedades.

El propiedad outerHeight le consigue la altura de toda la ventana, mientras que la propiedad innerHeight le consigue la altura de sólo el área de contenido de la ventana. for ejemplo, si cambia el tamaño de la ventana de la consola dev que ocupa el área de la ventana actual. De esta manera el propiedad innerHeight cambia su valor desde ahora el contenido de la ventana se ha reducido con el fin de dar cabida a la altura de la consola. Sin embargo, la propiedad outerHeight se mantiene sin cambios ya que el tamaño de la ventana entera sigue siendo el mismo. Sólo el contenido dentro de la ventana está cambiando su altura, no toda la ventana.

    window.innerHeight;
      window.outerHeight;

salida

304
  728

aplasté reducir la consola dev para reducir su altura y conseguir más altura For contenido de la ventana. El outerHeight sigue siendo el mismo, pero los aumentos innerHeight . Vamos a cambiar el tamaño de la ventana ahora,

    window.outerHeight;
      window.innerHeight;

salida

506
  150

Ahora, tanto el cambio de valores. Del mismo modo, podemos diferenciar entre las propiedades innerWidth y outerWidth también.

    window.innerWidth;
      window.outerWidth;

salida

736
  752

cómo Aviso pequeña es la diferencia entre los dos? Esto se debe a que cuando se cambia el tamaño de la ventana, el ancho interior y exterior prácticamente se mantiene igual que la consola dev está ocupando espacio en la dirección y, por lo que apenas afecta a la propiedad innerWidth . Sin embargo, si coloco en la base a un lado,

window.innerWidth;
  window.outerWidth;

salida

495
  752

Ahora puede ver una notable diferencia entre los dos como la consola dev está acoplado a un lado por lo que ocupa espacio en el x- dirección más y toma anchura interior de la ventana para adaptarse a sí mismo. Recuerde, estos valores se expresan en píxeles.

Deja un comentario Cancelar respuesta