CSS - ширина модели коробки

В соответствии с блочной моделью общая ширина элемента равна ширине содержимого + отступу + отступу + границе.

Если вы определяете элемент div и добавляете width=200, margin=3px, border=4px и padding=1px. затем при запросе в коде JS с использованием $('div').width() он возвращает 200, а не ширину в соответствии с формулой.


jquery css width box
person user3763367    schedule 22.09.2014    source источник
comment
Метод jQuery .width() всегда возвращает ширину содержимого. Вместо этого попробуйте .outerWidth().   -  person Hashem Qolami    schedule 22.09.2014
comment
См.: В чем разница между width, innerWidth и externalWidth, высота, внутренняя высота и внешняя высота в jQuery   -  person Hashem Qolami    schedule 22.09.2014

Ответы (3)


arrow_upward
2
arrow_downward

Пожалуйста, проверьте спецификации width();. Он возвращает ширину без полей, отступов и границ.

Если вы хотите включить отступы и границы, вам нужно использовать .outerWidth(), и если вы хотите включить margin тоже нужно использовать .outerWidth(true).

Надеюсь это поможет

person emmanuel    schedule 22.09.2014

arrow_upward
1
arrow_downward

Попробуйте использовать outerWidth( true ) вместо ширина

outerWidth( true ) возвращает ширину элемента вместе с отступами слева и справа, границей и, возможно, полем в пикселях.

используя $('div').width(), он возвращает 200

Это исключенный результат.

Если вы хотите получить ширину по формуле, вам нужно попробовать outerWidth( true )

$('div').outerWidth( true )
person Arun Chandran C    schedule 22.09.2014

arrow_upward
1
arrow_downward

.outerWidth(true); должно работать как надо

Внешняя ширина

person Sujit Agarwal    schedule 22.09.2014