Puis-je facilement “set” d'un élément offsetWidth?

Note: je sais offsetWidth est en lecture seule

Je suis en train de faire un pop-up 'div' superposition d'un tr élément avec la même largeur.

Cependant, je suis perplexe quant à la façon de régler mon div's width de sorte que son offsetWidth est exactement la même que la tr.

Le calcul ressemblerait à quelque chose comme:

div.width = tr.offsetWidth - div.paddingWidth - div.marginWidth

mais sûrement, il ya une meilleure façon (puisque je ne peut que penser à faire du remplissage et de la marge des décalages dans les groupes de deux...)

Plus précisément, j'aimerais une réponse pour YUI 2 si possible.

Il me semble que vous avez répondu à votre propre question. Ma seule recommandation serait d'obtenir la div est calculée à gauche et à droite de la marge et le remplissage des valeurs séparément, car ils pourraient tous être différents.
Ball: Ok, j'ai donc changé le titre de facilement réglage de la largeur. J'ai juste du mal à croire qu'il n'est pas intégré dans une bibliothèque quelque part (même si ce n'est pas YUI)
Notez également que le calcul de styles, etc peuvent renvoyer des valeurs comme "40px" qui est moins utile pour l'arithmétique
Vous devrez accéder à la marge et le remplissage de l'information par le biais de l'élément de style, par exemple div.style.paddingLeft. Rappelez-vous qu'il dispose d'une unité, si elle n'est pas en pixels que vous êtes hors de la chance. Si elle est, alors vous aurez à analyser le numéro de la première partie de votre calcul, c'est pourquoi je préfère avoir tout ce zéro avais comme indiqué dans ma réponse. (Vous être en mesure d'obtenir une meilleure normalisé marge et le remplissage de l'information par le biais de la window.getComputedStyle méthode, mais je n'ai aucune idée de la prise en charge du navigateur).

OriginalL'auteur Stephen | 2011-02-02

  1. 2

    Si vous remettez à zéro le div's de marge et de rembourrages, puis quelque chose comme la suivante devrait fonctionner:

    YAHOO.util.Dom.setStyle(div, 'width', tr.offsetWidth + 'px');

    Selon la façon dont vous traitez avec des frontières sur votre div et tr vous pouvez attribuer tr.clientWidth à la place.

    Vous pouvez ensuite définir la marge/rembourrages sur la relation parent/enfant les éléments de votre div pour obtenir l'apparence souhaitée.

    La clé de travail que vous aurez envie de faire est de comprendre exactement ce que clientWidth et offsetWidth mesure, et que le CSS width d'un élément est sa zone de contenu et exclut toute marge, bordure et remplissage définie (voir le W3C modèle de boîte ici).

    Vous pouvez inclure le rembourrage etc. dans votre calcul, par l'interrogation de la

    Actuellement, mon div a une erreur de classe attaché à elle qui définit la couleur d'arrière-plan, l'image et le rembourrage. Ai-je raison de penser que je pouvez toujours définir la largeur de la div parent, puis l'incorporation de l'erreur avec une largeur à 100%?
    Un élément de niveau bloc comme un div par défaut va occuper la largeur de son conteneur parent donc il ne devrait pas y avoir besoin de définir sa largeur IIRC.
    Nouveau conteneur div créé et zéro avais avec la bonne largeur, et la mise en forme d'origine/enfant div remplit le conteneur et a toutes c'est belle rembourrage etc. Merci

    OriginalL'auteur Simon Lieschke

  2. 1

    C'est un peu désordonné et je peut obtenir downvoted pour suggérant une, mais d'une façon vous pouvez faire cela sans vous embêter avec de la marge ou le rembourrage est de mettre le div de largeur pour une valeur connue, puis de trouver la différence entre cela et le div du offsetWidth. Cela devrait vous dire que pour définir la largeur afin de le faire rentrer.

    div.style.width = '20px'
diff = div.offsetWidth - 20;
div.style.width = tr.offsetWidth - diff;

    C'est vraiment compliqué, mais vous n'avez pas de soins sur la marge, la marge ou à la frontière de cette façon.

    OriginalL'auteur JamesH