recherche

Maison  >  Article  >  interface Web  >  La différence entre les échanges scrollWidth, clientWidth et offsetWidth_Experience

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

PHP中文网
PHP中文网original
2016-05-16 12:07:351666parcourir

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 : 

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


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 : 

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


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：
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
Article précédent：Plusieurs points qui me viennent à l'esprit lors de la résolution du problème de l'échange ul centering_ExperienceArticle suivant：Plusieurs points qui me viennent à l'esprit lors de la résolution du problème de l'échange ul centering_Experience

Articles Liés

Voir plus