{"id":1362,"date":"2012-10-28T03:17:29","date_gmt":"2012-10-28T03:17:29","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1362"},"modified":"2012-10-28T03:17:29","modified_gmt":"2012-10-28T03:17:29","slug":"jquery-get-width-get-div-width-get-li-width-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-width-get-div-width-get-li-width-examples\/","title":{"rendered":"jQuery Get Width Examples (Div, li, etc.)"},"content":{"rendered":"

If you have read through some of my previous articles, you have seen how we can get the height of a div, li, or any element using jQuery. Now if you are wondering how to get div width or width of any other element, then this article is for you. It is very easy to get div width & can be achieved using just 1 line code. So follow along to find out how you can get div width or width of any other element using jQuery<\/strong>.<\/p>\n

<\/p>\n

How to use jQuery to Get Width of any Element?<\/h2>\n

jQuery provides us with a very simple function, called width(). So the basic syntax to get width of an element would be as follows:<\/p>\n

Basic Syntax to \u00a0Get element width using jQuery<\/h3>\n
$(selector).width();<\/pre>\n
Example 1: Get div width using div ID<\/h3>\n
$('#my_div').width();<\/pre>\n
Example 2: Get div width using div class<\/h3>\n
$('.my_div_class').width();<\/pre>\n
Example 3: Get li width<\/h3>\n
$('ul li').width();<\/pre>\n
Example 4: Get specific li width<\/h3>\n
$('li#list_item_1').width();\n\n$('#list_item_1').width();<\/pre>\n
Example 5: Get paragraph width<\/h3>\n
$('p').width();<\/pre>\n
One thing to note. If you have, let’s say, a div. You have applied a border, margin and padding to this div. If you now use width() method on it, what do you expect to happen. Do you think it will add up the widths & widths of all the settings applied? Well, take a guess. If you have guessed that width() ignores all of that, then you are absolutely correct. Using width() only gets the width of the actual content in the div, li, etc. It does not consider the padding, margin, etc. applied on the element.\u00a0So if you want to add the padding, margins, borders, use the codes below.<\/p>\n
Example 6: Get div width and include Padding (Margin & Border are ignored)<\/h3>\n
$('#my_div').innerWidth();<\/pre>\n
Example 7: Get div width and include Padding & Border (Margin is ignored)<\/h3>\n
$('#my_div').outerWidth();<\/pre>\n
Example 8: Get div width and include Padding & Border & Margin<\/h3>\n
$('#my_div').outerWidth(true);<\/pre>\n
So I hope you get the idea. You can apply the methods shown below to elements of your choice to get it’s width. Simple, isn’t it?<\/p>\n
Your Turn!<\/h5>\n
Do you know of any other ways to get width of an element (li, div, etc.) using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you have read through some of my previous articles, you have seen how we can get the height of a div, li, or any element using jQuery. Now if you are wondering how to get div width or width of any other element, then this article is for you. It is very easy to […]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,41],"class_list":["post-1362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-lY","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1362"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}