Exemple de méthode pour obtenir la largeur en JS

---

Les valeurs de ces attributs de fenêtre et de document ne sont pas compatibles, ce qui sera ajouté ultérieurement.
L'affichage des effets suivant ignore les navigateurs antérieurs à IE9 et prend principalement en compte l'effet des navigateurs grand public et des téléphones mobiles.

• Vous pouvez obtenir les attributs de largeur et de hauteur

• clientHeight et clientWidth se réfèrent à le client de l'élément Taille de la zone, c'est-à-dire zone de contenu visible+padding

     #t1{
         width: 100px;
         height: 100px;
         border: 4px solid yellowgreen;
         background: yellow;
         padding: 10px;
     }

  
  

  p.clientWidth+';'+p.clientHeight ;

  120=width(100)+padding(10)*2;
  Aucune bordure n'est ajoutée Lorsque le contenu déborde ou qu'une barre de défilement apparaît, la largeur et la hauteur ne seront pas comptées.
  est la largeur visible de l'objet DOM. La largeur visible ici fait référence au masquage d'une partie du contenu après la définition de overflow: scroll;.

• offsetHeight et offsetWidth sont la taille externe de l'élément, c'est-à-dire bordure + remplissage + zone de contenu visible

  
  

  p.offsetWidth+';'+p.offsetHeight

  128 = width(100)+padding(10)2+border(4)2
  La zone de contenu dans l'image ci-dessus est masquée par un débordement car overflow: scroll; est défini.

• scrolWidth et scrollHeight sont les tailles réelles des éléments, c'est-à-dire la zone de contenu réelle + le remplissage

  
  

  p.scrollWidth+';'+p.scrollHeight

Les trois paires d'attributs ci-dessus sont toutes destinées aux éléments dom. La largeur de l'élément peut être. mesuré, mais si vous faites attention, vous constaterez que les trois méthodes ci-dessus ne fournissent pas de méthode pour obtenir la largeur (100), vous pouvez donc utiliser window.getComputedStyle(p,null).getPropertyValue('width');
pour obtenir 100.

---

En fait, ce qui est plus difficile à comprendre, c'est que les deux objets DOM comme window, document.body et document.documentElement ont divers problèmes lors de l'obtention de leurs largeurs.
Jetons maintenant un coup d’œil à la magie qui s’y cache. . .

• document.body et document.documentElement
  Le premier est body et le second est html. Mais maintenant, tout le monde est habitué à définir le remplissage et la marge par défaut des éléments sur 0, de sorte que peu importe qui accède à clientWidth via les deux méthodes ci-dessus, la valeur sera la même (la même du côté de l'ordinateur).
  Mais lorsque le téléphone mobile accède à ces deux valeurs, puisqu'il s'agit d'un client, nous effectuerons quelques réglages pour la balise meta de la page web, puis les valeurs des attributs accessibles via ces deux objets seront être différent. Cependant, comme body est une sous-balise du html, pour obtenir la taille de la fenêtre visuelle (clientWidth), il est recommandé d'utiliser cette dernière document.documentElement.clientWidth.

  L'objet document a un attribut compatMode, qui a deux valeurs :
  BackCompat correspond au mode bizarreries
  CSS1Compat correspond au mode strict
  Les navigateurs avant IE6 sont le premier mode de rendu, obligeant IE6 à utiliser document.body.clientWidth pour accéder à la fenêtre visuelle (clientWidth). IE6 L'entreprise dans laquelle j'ai effectué mon stage a abandonné.

Pour résumer : abandonnez l'utilisation de document.body et utilisez document.documentElement.

• Lequel dois-je utiliser entre window.innerWidth et document.documentElement.clientWidth ?
  La prochaine chose à aborder est l'effet de ne pas ajouter de balises méta aux pages Web. Je pense que je devrais écrire un autre article sur l'ajout de balises, car cela impliquera la connaissance de adaptative.
  J'ai fait un test sur le navigateur Android, le navigateur Safari de l'iPhone et le navigateur QQ fonctionnant sur les deux téléphones mobiles pour accéder à la page Web dans WeChat.
  Les résultats des tests ne sont certainement pas uniformes.
  Principe du test : ne définissez pas de largeur fixe pour la page et ne définissez pas de balise méta.
  Résultats des tests :

属性	安卓机	iphone
window.innerWidth	980px	980px
~.~.clientWidth	980px	980px

tableau>

Il y a toujours des fauteurs de troubles. . .
Pour résumer : Si vous souhaitez obtenir la largeur visuelle de la page mobile, il est recommandé d'utiliser
documentElement.clientWidth

Dans le prochain article, J'en discuterai dans mes notes. La valeur de l'attribut sous différents paramètres de la balise méta est analysée.

BTW : Je suis de retour, j'étudie dur !

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2. Manuel de référence en chinois JavaScript

.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Attributs

WeChat pour Android

iphone WeChat

window.innerWidth

属性	安卓机微信	iphone微信
window.innerWidth	320px	980px
~.~.clientWidth	980px	980px

320px

980px

~.~.clientWidth

980px

980px

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!