如何在JavaScript中查找元素的實際寬度

Question

嗨，我正在嘗試查找給定元素的實際寬度，並彈出顯示實際寬度的警報。

我正在使用的代碼在這里。

html元素

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

我正在使用這個：

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

Answer 1

嘗試像

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

然后像這樣編輯你的html

<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(); 用於顯示（渲染）的實際寬度，以及$(this).find("#menu_bar").css('width')用於應用的寬度

Answer 6

在jQuery中有兩種寬度方法； 1）.innerWidth 2）.outerwidth

innerwidth計算不帶邊距寬度，而outerWidth計算帶邊距寬度。

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