La différence entre les échanges scrollWidth, clientWidth et offsetWidth

Maison

interface Web

tutoriel CSS

La différence entre les échanges scrollWidth, clientWidth et offsetWidth_Experience

May 16, 2016 pm 12:07 PM

offsetwidth

La différence entre scrollWidth, clientWidth et offsetWidth_Experience Exchange

scrollWidth
est la largeur du contenu réel de l'objet, à l'exclusion de la largeur du bord, et changera avec le contenu de l'objet (Plus de contenu peut modifier la largeur réelle de l'objet).
clientWidth
est la largeur visible de l'objet, à l'exclusion des barres de défilement et autres bords, et changera avec la taille d'affichage de la fenêtre.
offsetWidth
est la largeur visible de l'objet, y compris les barres de défilement et autres bords, qui changera avec la taille d'affichage de la fenêtre.

Un exemple de scrollWidth et clientWidth :

&lt;html&gt;  
&lt;head&gt;  
&lt;title&gt;77.htm文件&lt;/title&gt;  
&lt;/head&gt;  
&lt;body&gt;  
&lt;textarea wrap=&quot;off&quot; onfocus=&quot;alert(&#39;scrollWidth:&#39;+this.scrollWidth+&#39;\n clientWidth:&#39;+this.clientWidth);&quot;&gt;
&lt;/textarea&gt;  
&lt;/body&gt;  
&lt;/html&gt;

Copier après la connexion

Entrez le contenu dans la zone de texte Lorsque la barre de défilement horizontale n'apparaît pas, les valeurs de scrollWidth et clientWidth sont. le même. Lorsqu'une ligne de contenu dépasse la largeur de la zone de texte, une barre de défilement horizontale apparaît et la valeur de scrollWidth change.
scrollWidth est la largeur du contenu réel de l'objet.
clientWidth est la largeur vue par l'objet (hors bords), qui ne changera pas dans cet exemple.

Un exemple de clientWidth et offsetWidth :

&lt;html&gt;  
&lt;head&gt;  
&lt;title&gt;77.htm文件&lt;/title&gt;  
&lt;/head&gt;  
&lt;body&gt;  
&lt;textarea wrap=&quot;off&quot; onfocus=&quot;alert(&#39;offsetWidth:&#39;+this.offsetWidth+&#39;\n clientWidth:&#39;+this.clientWidth);&quot;&gt;
&lt;/textarea&gt;  
&lt;/body&gt;  
&lt;/html&gt;

Copier après la connexion

La valeur de offsetWidth est toujours supérieure à la valeur de clientWidth.
clientWidth est la largeur vue par l'objet (hors bords)
offsetWidth est la largeur vue par l'objet (y compris les bords, comme la largeur occupée par la barre de défilement)

Le ci-dessus est scrollWidth, La différence entre clientWidth et offsetWidth_Experience échange de contenu, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !

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