$ (élément) .outerWidth (true) génère des rapports différents en fonction du thème?

J’ai un script jQuery, cela définit la largeur d’un élément à 50% via l’atsortingbut CSS width normal.

Si je outerWidth(true) alors la outerWidth(true) de cet élément pour obtenir la valeur exacte du pixel, cela ne correspond parfois pas à $(window).width()/2 – cela dépend du thème du site. Malheureusement, je ne peux pas mettre en ligne de démonstration de ce comportement.

Existe-t-il un atsortingbut CSS spécifique qui pourrait causer une telle différence?

Le problème est que outerWidth() rapporte par exemple 564px , mais lorsque je vérifie l’inspecteur Safari, il indique 580 . Donc, le retour de cette fonction est incorrect et j’aimerais pouvoir savoir quelle est la cause.

Démo:

http://users.telenet.be/prullen/this/

http://users.telenet.be/prullen/that/

Le contenu (zone grise lorsque vous cliquez sur l’onglet rouge) est censé être masqué lors du chargement via une marge négative, mais en raison du retour (incorrect?) De jQuery, il ne figure pas dans l’un de ces thèmes (légèrement visible).

Les appels console.log sont:

  console.log('window width / 2 = ' + $(window).width()/2); console.log('doc width /2 = ' + $(document).width()/2); console.log('width = ' + defaults.boxWidth); console.log('width = ' + $slider.css('width')); console.log('width = ' + $slider.width()); console.log('width = ' + $slider.outerWidth()); console.log('width = ' + $slider.outerWidth(true)); 

.outerWidth([includeMargin]) – Renvoie la largeur de l’élément, ainsi que les .outerWidth([includeMargin]) gauche et droite, la bordure et (éventuellement) la marge en pixels.


Définir l’option [includeMargin] sur true ajoute les marges à ce nombre:

.outerWidth(true) – Retourne la largeur de l’élément, ainsi que les .outerWidth(true) gauche et droite, la bordure et la marge , en pixels.


.width() – Retourne une valeur de pixel sans unité .width() pas les marges, bordures et marges à gauche et à droite.

Comme dans la documentation jQuery, la seule différence entre .width() et .css(width) est que ce dernier inclut les unités (‘px’), où width() renvoie simplement le nombre (sans le ‘px’).

Donc, si, par définition, width() n’inclut pas les marges, les marges et les bordures, css(width) ne le peut pas non plus css(width)


J’ai un script jQuery, cela définit la largeur d’un élément à 50% via l’atsortingbut CSS width normal.

Ceci définit l’élément lui-même (excluant les marges, le remplissage et les bordures) à 50% de son conteneur. Si la fenêtre est le conteneur, la largeur de l’élément sera égale à 50% de celle-ci.

Exemple: avec une fenêtre de 1160 pixels de large, votre script créera un élément à 50% de 1160 pixels ou de 580 pixels de large (sans marge, remplissage ni bordures).

Si je outerWidth(true) alors la outerWidth(true) de cet élément pour obtenir la valeur exacte du pixel, cela ne correspond parfois pas à $(window).width()/2 .

Lorsque vous regardez le même élément avec outerWidth(true) , vous ajoutez maintenant une marge, un remplissage ou des bordures au nombre.

Si je prends le même exemple: avec une fenêtre de 1160 pixels, $(window).width()/2 sera 580. En supposant que votre élément ait également 580 pixels, .outerWidth(true) appenda (ou soustraira) des marges, appenda une bordure et ajoutez du rembourrage à l’élément lui-même pour ne pas obtenir 580, à moins que les marges, le remplissage et la bordure soient tous nuls.

Donc, naturellement, avec un “thème” différent (en utilisant votre définition), l’élément aura probablement un remplissage, une bordure et des marges différents. Je ne peux pas dire avec certitude puisque je ne vois aucun de vos codes.

Utilisez simplement .width() à la place de .outerWidth(true) pour conserver la même cohérence dans tous vos thèmes.


MODIFIER:

Dans la console Safari, une marge sur le body provoque ce que vous décrivez. Dans votre feuille consolidated-screen-2.css , vous avez une marge gauche de 20 pixels.

Vous devez tenir compte de cette marge corporelle lorsque vous effectuez vos calculs.

Puisque ton JavaScript ne se met pas à jour dynamicment et que ce n’est pas dans un jsFiddle, je ne peux plus le tester. Lorsque je règle la marge à 0 dans le DOM, je ne peux pas invoquer le JS pour recalculer les nombres sans recharger la page, ce qui, bien sûr, annule ma suppression du DOM.

Une solution serait de restr avec .width() (ignorer les marges) dans tous vos calculs.

Une solution alternative semble inclure la mise à zéro de la marge body .


EDIT 2:

Vous continuez à dire que les rapports sont incorrects, mais j’ai un utilitaire de règle de pixels semi-opaque superposé sur mon écran pour les éléments suivants et tout est en cours de vérification …

Cette page dans une fenêtre de 1228 pixels de large. La règle vérifie cela.

console.log('width = ' + $slider.outerWidth(true)); = 1188

1188 plus 40 pixels (marges du body gauche / droite) = 1228 (identique à la règle)

Le tiroir est ouvert et la règle vérifie qu’elle fait exactement 614 pixels de large (sans la bordure droite).

console.log('width = ' + $slider.css('width')); = 594 px;

594 plus 20 pixels (marge du body gauche) = 614 (identique à la règle)

console.log('width = ' + $slider.width()); = 594

594 plus 20 pixels (marge du body gauche) = 614 (identique à la règle)

width et outerWidth(true) sont supposés être deux choses différentes. Le premier n’inclut pas le rembourrage, la bordure ou la marge – le second le fait.

Si vous voulez que la outerWidth soit exactement la moitié de la largeur de la fenêtre, vous devez explicitement prendre en compte ces éléments dans:

 var $el = $('#el'); var wid = $(window).width()/2 - parseInt($el.css('padding-left')) - parseInt($el.css('padding-right')) - parseInt($el.css('border-left')) - parseInt($el.css('border-right')) - parseInt($el.css('margin-left')) - parseInt($el.css('margin-right')) // assumes all those things are set using pixels, not em or percent or something $el.width(wid);