Javascript 无法通过jQuery获取Div宽度

我有几个子Div的HTML Div。当我试图获取主Div的宽度时，得到的宽度与inspect元素中显示的宽度不同。我想要的是可见宽度，即检查元素时显示的宽度。我尝试了

outerWidth（）

和

offsetWidth

，但没有成功

offsetWidth

给我“未定义”。我怎么能得到这个

var x=$（“.main”）.width（）；
$（“按钮”）。在（“单击”，函数（）{
警报（x+“（检查元件的宽度为571）”）；
});
.main{
显示器：flex；
溢出：隐藏；
}
.sub{
填充：10px；
利润率：10px；
宽度：50px；
高度：50px；
背景色：#faa；
}

一个
两个
三
四
获取主DIV宽度
使用
内联Flex


var x=$（“.main”）.width（）；
$（“按钮”）。在（“单击”，函数（）{
警报（x）；
});
.main{
显示：内联flex；
溢出：隐藏；
}
.sub{
填充：10px；
利润率：10px；
宽度：50px；
高度：50px；
背景色：#faa；
}

一个
两个
三
四
获取主DIV宽度
使用
内联Flex


var x=$（“.main”）.width（）；
$（“按钮”）。在（“单击”，函数（）{
警报（x）；
});
.main{
显示：内联flex；
溢出：隐藏；
}
.sub{
填充：10px；
利润率：10px；
宽度：50px；
高度：50px；
背景色：#faa；
}

一个
两个
三
四
获取主DIV宽度
获取div宽度时，您必须小心。如果是在页面加载之前或在调整窗口大小之前，您的解决方案将不起作用

当我在点击事件中得到宽度时，我总是得到正确的宽度。
您也可以在页面加载以下内容后执行一次：

$(function() {
  // your code
});

同：

$('document').ready(function(){
  // your code
});


var x=0；
//交替
$（函数（）{
//这只会发生一次，并且不会对调整大小作出反应
x=$（“.main”）.width（）；
控制台日志（“div宽度：+x”）；
});
$（“按钮”）。在（“单击”，函数（）{
//调整大小没有问题
x=$（“.main”）.width（）；
警报（“div宽度：+x”）；
});
.main{
显示器：flex；
溢出：隐藏；
}
.sub{
填充：10px；
利润率：10px；
宽度：50px；
高度：50px；
背景色：#faa；
}

一个
两个
三
四
获取主DIV宽度
获取div宽度时，您必须小心。如果是在页面加载之前或在调整窗口大小之前，您的解决方案将不起作用

当我在点击事件中得到宽度时，我总是得到正确的宽度。
您也可以在页面加载以下内容后执行一次：

$(function() {
  // your code
});

同：

$('document').ready(function(){
  // your code
});


var x=0；
//交替
$（函数（）{
//这只会发生一次，并且不会对调整大小作出反应
x=$（“.main”）.width（）；
控制台日志（“div宽度：+x”）；
});
$（“按钮”）。在（“单击”，函数（）{
//调整大小没有问题
x=$（“.main”）.width（）；
警报（“div宽度：+x”）；
});
.main{
显示器：flex；
溢出：隐藏；
}
.sub{
填充：10px；
利润率：10px；
宽度：50px；
高度：50px；
背景色：#faa；
}

一个
两个
三
四
获取主DIV宽度
您是使用OffsetWidth还是OffsetWidth？@Chris OffsetWidth似乎给了我正确的宽度。例如：我检查
.main
元素，它有
514px
，警报也显示
514px
。当然，如果您使用
警报（x+“（检查元素的宽度为571）”
你会得到不同的结果，lol，因为
571
只是你添加的一个字符串，从你的示例中至少可以推断出这一点。此外，如果你以某种方式调整浏览器窗口的大小，它当然会得到错误的
x
。您必须放置
var x=$（“.main”）.width（）在点击事件中。我知道了。正如您所说，var x需要位于click事件内部。非常感谢。你做的是OffsetWidth还是OffsetWidth？@Chris OffsetWidth似乎给了我正确的宽度。例如：我检查
.main
元素，它有
514px
，警报也显示
514px
。当然，如果您使用
警报（x+“（检查元素的宽度为571）”
你会得到不同的结果，lol，因为
571
只是你添加的一个字符串，从你的示例中至少可以推断出这一点。此外，如果你以某种方式调整浏览器窗口的大小，它当然会得到错误的
x
。您必须放置
var x=$（“.main”）.width（）在点击事件中。我知道了。正如您所说，var x需要位于click事件内部。非常感谢。OP输出和您的有什么区别？@ION但区别似乎在于内部元素的宽度而不是屏幕（虽然不能解决OPs问题），我认为情况并非如此。他想得到
.main
元素的正确宽度，但他没有得到正确的宽度，因为在页面加载后，元素宽度正在调整，因为他可能正在打开Inspect元素或其他东西，因此变量
x
声明不正确。无论如何，OP在他的评论中证实了我的怀疑。OP输出和你的有什么区别？@Ion但区别似乎在于内部元素的宽度而不是屏幕（虽然不能解决OPs问题），我不认为是这样。他想得到
.main
元素的正确宽度，但他没有得到正确的宽度，因为在页面加载后，元素宽度正在调整，因为他可能正在打开Inspect元素或其他东西，因此变量
x
声明不正确。无论如何，OP在他的评论中证实了我的怀疑。