2011-02-02 3 views
2

Примечание: Я знаю, что offsetWidth читается толькоМогу ли я легко «установить» смещение элемента?

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

Однако я озадачен о том, как установить мои div «ы width так, что его offsetWidth точно такой же, как tr.

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

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

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

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

+0

Мне кажется, что вы ответили на свой вопрос. Моя единственная рекомендация заключалась бы в том, чтобы получить вычисленные левые и правые поля div и дополнительные значения отдельно, так как все они могут быть разными. –

+0

@Matt Ball: Хорошо, поэтому я изменил название на _easily_, установив ширину. Мне просто нечего верить, что он не встроен в какую-нибудь библиотеку где-нибудь (даже если это не YUI) – Stephen

+0

Также обратите внимание, что вычисленные стили и т. Д. Могут возвращать значения, такие как «40px», что меньше, чем полезно для арифметики – Stephen

ответ

2

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

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

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

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

Ключ к работе, что вы хотите сделать, это понять именно то, что clientWidth and offsetWidth measure, и что CSS width элемента является его областью содержимого и исключает маржу, границы и отступы, определенный на нем (see the W3C box model here).

Вы могли бы включать отступы и т.д. в вашем расчете, запрашивая его из

+0

В настоящее время мой div имеет к нему класс ошибок, который задает цвет фона, изображение и соответствующее заполнение. Правильно ли я думаю, что я могу установить ширину в родительском div, а затем внедрить ошибку с шириной на 100%? – Stephen

+0

Элемент уровня блока, такой как 'div' по умолчанию, будет занимать ширину его родительского контейнера, поэтому не нужно устанавливать его ширину IIRC. –

+0

Создан новый контейнер div и zero'd с правильной шириной, а форматированный оригинал/дочерний div заполняет контейнер и имеет все свое собственное прекрасное дополнение и т.д. Спасибо – Stephen

0

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

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

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

Смежные вопросы