Javascript Jquery元素宽度与检查模式元素宽度

我试图在循环中测量页面上的一个元素，并从包含元素的宽度中减去它。但是，当我使用

.width（）

时，它返回的值与我检查元素时得到的值不同。我也试过

内部

和

外部

宽度。即使如此，它似乎并没有准确地获得宽度，因为我所做的是在一个跨度中获取文本的宽度，例如，第一个文本被包装在一个称为

烟熏坑翼的跨度中，我们计算宽度，从
h5
的总宽度中减去它，我们应该得到
点
元素的宽度，您可以看到下面的图像演示了这一点，但是点和数字应该在右侧对齐，但是它们没有对齐

任何帮助都会很好

这是到目前为止我的代码

var colWidth = $(".food-menu__column").width();
var array = [];

$('.food-menu__item').each(function(i, obj) {
    var width = $(obj).width();    
    array.push(width);      
});

console.log(colWidth);
console.log(array);  

$('.dotted').each(function(i, obj) {
    var widthDotted = colWidth - array[i];
   $(obj).width(widthDotted);  
   console.log(widthDotted);      
});

这是代码布局的图像，虚线跨度元素需要是容器列的宽度减去左侧文本的宽度，然后价格和点应该在左侧匹配，但它们稍微偏离，但我不明白为什么，因为jquery至少应该对它们进行相同的度量


下面是生成的html的图像

元素的默认布局为。在该模型中，为
宽度
或
高度
返回的默认大小不考虑填充、边框或边距。这在一开始总是令人困惑的，这也是为什么您会发现，即使您设置了元素的大小，它通常渲染的值也会稍微大于该值的原因

但是，的domapi没有。
元素的默认布局是。在该模型中，为
宽度
或
高度
返回的默认大小不考虑填充、边框或边距。这在一开始总是令人困惑的，这也是为什么您会发现，即使您设置了元素的大小，它通常渲染的值也会稍微大于该值的原因

但是，的DOM API确实如此。
好吧，这不是现成的完美方案，但是您可能想尝试一下这个解决方案


p{
背景：继承；
宽度：70%；
最大宽度：40雷姆；
最小宽度：300px；
保证金：0自动；
位置：相对位置；
}
p:以前{
内容：''；
位置：绝对位置；
底部：.2rem；
宽度：100%；
身高：0；
线高：0；
边框底部：2个点#ddd；
}
.描述{
背景：继承；
显示：内联；
z指数：1；
}
.价格{
位置：绝对位置；
最小宽度：4rem；
底部：0；
右：0；
左侧填充：.2rem；
文本对齐：右对齐；
z指数：2；
}
.价格：之后{
内容:"元";；
}

某项
价格


某些项目-2
价格-2
好吧，这不是开箱即用的完美解决方案，但您可能想试试这个解决方案


p{
背景：继承；
宽度：70%；
最大宽度：40雷姆；
最小宽度：300px；
保证金：0自动；
位置：相对位置；
}
p:以前{
内容：''；
位置：绝对位置；
底部：.2rem；
宽度：100%；
身高：0；
线高：0；
边框底部：2个点#ddd；
}
.描述{
背景：继承；
显示：内联；
z指数：1；
}
.价格{
位置：绝对位置；
最小宽度：4rem；
底部：0；
右：0；
左侧填充：.2rem；
文本对齐：右对齐；
z指数：2；
}
.价格：之后{
内容:"元";；
}

某项
价格


某些项目-2
价格-2
我会将CSS与flexbox一起使用，而不用担心计算/设置宽度。CSS也可以通过其他方式实现，但这似乎是更简单的解决方案


.container{
显示器：flex；
}
.column.left、.column.right{
宽度：自动；
flex:0自动；
边缘顶部：5px；
右侧填充：4px；
左侧填充：4px；
}
.圆柱中心{
弹性：1；
文本对齐：居中；
底部边框：2件黑色虚线；
边缘底部：10px；
}

比萨饼
$11.99
冰
$0.99
我会将CSS与flexbox一起使用，而不用担心计算/设置宽度。CSS也可以通过其他方式实现，但这似乎是更简单的解决方案


.container{
显示器：flex；
}
.column.left、.column.right{
宽度：自动；
flex:0自动；
边缘顶部：5px；
右侧填充：4px；
左侧填充：4px；
}
.圆柱中心{
弹性：1；
文本对齐：居中；
底部边框：2件黑色虚线；
边缘底部：10px；
}

比萨饼
$11.99
冰
$0.99
您是否尝试过
offsetWidth
？您可能可以使用纯CSS来完成此操作，而不需要任何JavaScript。@epascarello如果您知道如何使用纯CSS来完成此操作，我会更喜欢。首先-这不是生成的HTML图像。这是inspector控制台的图像。生成的HTML可以而且通常与控制台不同。第二，你的脚本什么时候运行？文件准备好了吗？在尝试获取宽度之前，是否确定DOM已完成渲染？最后，@epascarello是100%正确的-用CSS来代替它。@cale\b当
span.dottered
元素在任何情况下都需要不同时，我如何设置它的宽度，
food-menu\u项目的名称将经常更改，因此如何正确设置
span.dottered
它将在您尝试
offsetWidth
时在CMS中更改
food-menu项目时随时中断？您可能可以使用纯CSS而不需要任何JavaScript来完成此操作。@epallo如果您知道如何操作的话首先，这不是生成的HTML的图像。这是inspector控制台的图像。生成的HTML可以而且通常与控制台不同。第二，你的脚本什么时候运行？文件准备好了吗？在尝试获取宽度之前，是否确定DOM已完成渲染？最后，@epascarello是100%正确的-do