Найти минимальную ширину, необходимую для отображения элемента в полном объеме с помощью jQuery?

Question

Можно ли найти количество пикселей, необходимое для полного отображения div?

Прямо сейчас, мой div на 100%, но мне бы очень хотелось, чтобы он был таким же маленьким, как контент ... (не могу использовать float или другие трюки css).

Answer 1

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

Таким образом, вы можете использовать функцию, подобную этой, чтобы получить div для временного переноса его содержимого, чтобы вы могли измерить ширину содержимого. Затем вы можете использовать эту ширину, чтобы установить ее размер, если хотите:

function measureWidth(selector) {
    var item = $(selector).eq(0);     // just first item
    var pos = item.css("position");   // save original value
    item.css("position", "absolute");
    var width = item.width();
    item.css("position", pos);
    return(width);
}

var width = measureWidth("#header");

Вы можете увидеть его здесь: http://jsfiddle.net/jfriend00/L2J5w/

К вашему сведению, я изучил эту технику из jQuery. Он использует его для измерения ширины некоторых вещей. Он даже имеет внутреннюю (недокументированную) функцию под названием .swap(), которая используется для сохранения значений набора свойств CSS, установки этих свойств CSS на что-то другое, проведения измерения, а затем восстановления свойств CSS до их исходных значений. .

Answer 2

Если вы не установите ширину div равной 100% и не установите display: inline, тогда он должен занимать столько же места, сколько и содержимое, если он не переполняется.

Еслитогда содержимое переполняется, и это говорит вам ширину div для его содержимого при наличии полосы прокрутки

$("#mydivid")[0].scrollWidth