Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Getting the real width

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #31843
    richtestani
    Member

    Using JQuery, I was working on getting the width of a collection ‘li’ elements.
    In my style sheet, I have it set to 54px with 5px on padding and margins.

    var width = $('li').width();

    Reports 54. Just as I’ve defined.
    So I went ahead and added the margins and padding to it as well.

    width = width +
    parseInt($(li).css('padding-left')) +
    parseInt($(li).css('padding-right')) +
    parseInt($(li).css('margin-left')) +
    parseInt($(li).css('margin-right'))

    Sooooo, is this the way I would go and get the real width of elements?

    Thanks
    Rich

    #57210
    Johnnyb
    Member

    You can use jquery’s ‘innerWidth’ property: http://api.jquery.com/innerWidth/ to measure the width plus padding, but unfortunately that doesn’t take into account the margins.

    #57212
    jamygolden
    Member

    outerWidth(true) includes margins.

    #57214
    Johnnyb
    Member

    Nice, very useful, didn’t know about that one!

    #57074
    richtestani
    Member

    Wow – thank @jamy_za and @johnnyb
    Very helpful.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.