How to find the actual width of element in javascript

Question

Hi i am trying to find the actual width of given element and pop the alert which shows the actual width.

code i am using is here..

html element

<table cellspacing="1" cellpadding="5" style=";width:975px;border: 1px solid black;" id="menu_bar">

i am using this:

var widthofmenubar = $(this).find("#menu_bar").width;

Answer 1

Try like

var widthofmenubar = $("#menu_bar").width();

and edit your html like

<table cellspacing="1" cellpadding="5" style="width:975px;border: 1px solid black;" id="menu_bar">

Answer 2

添加() ，您需要执行.width()方法。

var widthofmenubar = $(this).find("#menu_bar").width();

Answer 3

var widthofmenubar = $("#menu_bar").width();

Answer 4

Try this:


First you edit your code, remove ';' after style attr

Correct Code is:

<table cellspacing="1" cellpadding="5" style="width:975px;border: 1px solid black;" id="menu_bar">

Not

<table cellspacing="1" cellpadding="5" style=";width:975px;border: 1px solid black;" id="menu_bar">

// Get Table Width by ID

var tableWidth = $('#menu_bar').css('width');

alert(tableWidth ); // will alert table width

Answer 5

$(this).find("#menu_bar").width(); for actual width that is displayed (rendered) and $(this).find("#menu_bar").css('width') for applied width

Answer 6

there is two methods in jquery for width; 1) .innerWidth 2) .outerwidth

innerwidth calculate without margin width and outerWidth calculate with margin width.

$('#menu_bar').innerWidth();
$('#menu_bar').outerWidth();