Quelle est la raison de l'écart entre les valeurs de hauteur et de largeur que j'ai définies et celles qui sont retournées

Je suis nouveau sur Html et JavaScript. J'essaie d'apprendre la méthode width () et height () de JavaScript. J'ai réglé la hauteur et la largeur de div1 à 100px et 300px respectivement. Cependant, lorsque je lance le code, la hauteur et la largeur renvoyées par le JavaScript sont respectivement 299.666666 et 99.666665. Quelle est la raison de l'écart entre les valeurs que j'ai définies et celles qui sont retournées. Merci d'avance pour votre aide!

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { var txt = ""; txt += "Width of div: " + $("#div1").width() + "</br>"; txt += "Height of div: " + $("#div1").height(); $("#div1").html(txt); }); }); </script> <style> #div1 { height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue; } </style> </head> <body> <div id="div1"></div> <br> <button>Display dimensions of div</button> <p>width() - returns the width of an element.</p> <p>height() - returns the height of an element.</p> </body> </html> 

La raison de cette divergence est que les navigateurs diffèrent sur les fonctions de zoom. Alors que tyler durden a dit ici :

"La raison pour laquelle certains navigateurs ne zooment pas correctement n'a rien à voir avec le support de sous-pixels, c'est parce qu'ils ne se souviennent pas exactement de la position et de l'arrondi . En d'autres termes, ils arrondissent prématurément la position et cela provoque l'image Être mal aligné. "

En fait, pour l'exemple que vous vous référez également, sur mes navigateurs, le safari ne diffuse que le texte!

IE, Chrome, Opera et Firefox redimensionnent en calculant non seulement le texte, mais aussi tous les éléments que vous utilisez sur votre page (bordure, largeur, rembourrage, etc.). En outre, la frontière AFFECTE le bord extérieur de votre élément afin de voir si son arrondi correctement:

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(window).ready(function () { $("button").click(function () { var txt = ""; txt += "Width of div1: " + $(window).width() + "</br>"; txt += "Width of div1: " + $("#div1").width() + "</br>"; txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>"; txt += "Height of div1: " + $("#div1").height(); $("#div1").html(txt); fixSubpixelLayout($('#all-cats'), $('#all-cats .cat')); }); }); </script> <style> #div1 { height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue; } </style> </head> <body> <div id="div1"></div> <br> <button>Display dimensions of div</button> <p>width() - returns the width of an element.</p> <p>height() - returns the height of an element.</p> </body> </html> 

Vous pouvez utiliser la méthode parseInt pour obtenir une valeur absolue.

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { var txt = ""; txt += "Width of div: " + parseInt($("#div1").width())+ "</br>"; txt += "Height of div: " + parseInt($("#div1").height()); $("#div1").html(txt); }); }); </script> <style> #div1 { height: 100px; width: 300px; padding: 10px; margin: 3px; border: 1px solid blue; background-color: lightblue; } </style> </head> <body> <div id="div1"></div> <br> <button>Display dimensions of div</button> <p>width() - returns the width of an element.</p> <p>height() - returns the height of an element.</p> </body> </html> 

Bien que vrai, ma réponse initiale n'était pas pertinente à la question posée . Au fur et à mesure que des remarques ont été posées lors des commentaires, j'ai découvert mon erreur initiale et j'ai tenté de répondre correctement à une question semblable. Je suis plutôt pertinent pour ce qui précède.

Une autre raison assez courante pour la mise à l'échelle des pixels, mentionnée par adeneo dans les commentaires ci-dessous est la mise à l'échelle / le zoom du navigateur ( Ctrl/Cmd + + , Ctrl/Cmd + - , Ctrl/Cmd + 0 pour réinitialiser).


Malgré son nom choisi, le navigateur px n'a rien à voir avec les pixels physiques, les périphériques et ils ne sont pas l'unité d'écran "par défaut". Il faut donc le calculer. C'est une mesure angulaire non linéaire:

Comme défini dans CSS Lengths,

Le pixel de référence est l'angle visuel d'un pixel sur un dispositif avec une densité de pixels de 96dpi et une distance du lecteur d'une longueur de bras. Pour une longueur de bras nominale de 28 pouces, l'angle visuel est donc d'environ 0,0213 degrés. Pour la lecture à distance, 1px correspond donc à environ 0,26 mm (1/96 pouce).

Une explication plus détaillée ici .

En général, l'arrondissement en binaire peut causer cela.

Ne peut être sûr de ce cas particulier, mais arrondi un nombre dans baseX n'est pas le même que le même nombre arrondis après la conversion à baseY. Les ordinateurs font leurs calculs avec ceux et les zéros, pas toutes les langues éliminent l'écart.