Получить ширину элемента без jquery

Question

Не обращайте внимания на это, я сделал это с помощью oldschool с элементами подсчета.

У меня есть несколько div внутри главного div. Теперь верхний div имеет ширину набора, но внутри он изменяется по ширине из-за содержания в нем. Поэтому, если я не ошибаюсь, мне нужна внутренняя ширина. В любом случае, в этом случае это должно привести к ширине 600.

Я не использую jquery, но jqui, поэтому мне бы хотелось, чтобы он только в javascript, видя, что jqui не имеет функции внутренней/внешней ширины. Это значит, что у меня есть селектор $, с которым можно играть.

<style> 
    .holder { 
    width:100%; /* which in this case is 320px */ 
    overflow-x: auto; 
    overflow-y:hidden; 
    } 

    .menu_item { 
    width:200px; 
    float:left; 
    } 
</style> 

<div class="holder" onscroll="get_width(this)"> 
    <div class="menu_item"> 
    item1 
    </div> 
    <div class="menu_item"> 
    item2 
    </div> 
    <div class="menu_item"> 
    item3 
    </div> 
</div> 

get_width(that) { 
    alert(that.innerWidth); // returns undefined 
    alert(that.width); // returns undefined 
} 

http://jsfiddle.net/TSQs7/2/

Answer 1

Я считаю, что вы ищете element.offsetWidth

Answer 2

Чтобы получить ширину и высоту использовать clientWidth и clientHeight соответственно.

element.clientWidth 

UPDATE:

clientWidth поддерживается даже в пожилом ie6

проверить это для всех платформ поддержки:

platforms support reference

Проверить эту большую статью для более углубленной информации о различном связанных с шириной свойства:

understanding offsetwidth clientwidth scrollwidth and height respectively

ПРИМЕЧАНИЯ:

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

clientWidth MDN

Fiddle Demo