Могу ли я легко «установить» элемент offsetWidth?

Question

Примечание. Я знаю, что offsetWidth доступна только для чтения

Я пытаюсь сделать всплывающее «div» наложение элемента tr с точно такой же шириной.

Тем не менее, я озадачен тем, как установить мои div width так, чтобы его offsetWidth точно соответствовал tr.

Расчет будет выглядеть примерно так:

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

но, безусловно, есть лучший способ (поскольку я могу думать только о получении отступов отступов и полей в группах по два ...)

В частности, я бы хотел получить ответ для YUI 2, если это возможно.

Answer 1

Если вы обнулите поля и отступы div, то должно сработать что-то вроде следующего:

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

В зависимости от того, как вы работаете с границами на div и trвместо этого вы можете назначить tr.clientWidth.

Затем вы можете установить любые поля / отступы, необходимые для родительских / дочерних элементов div, для достижения желаемого вида.

ключ к разработке того, что вы хотите сделать, - это точное понимание того, что clientWidth и offsetWidth измеряют , и что CSS width элемента является его областью содержимого и исключает любые поля и границыи заполнение, определенное на нем ( см. здесь блочную модель W3C ).

Вы можете включить заполнение и т. д. в свой расчет, запросив его у

Answer 2

Это немного сумбурно, и я могу получить отрицательный отзыв за то, что предложил это, но один из способов, которым вы могли бы сделать это, не испортив свой запас или отступы, - установить ширину div на известное значение, а затем найти разницу между этим и divoffsetWidth.Это должно сказать вам, что нужно установить ширину, чтобы она соответствовала.

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

Это действительно грязно, но вам не нужно заботиться о отступах, полях или границах таким образом.