javascript - 如何使用 jquery 获取 li 宽度 + 边距

Question

我的代码是这样的

//css
li{display:inline-block}

//html #li margin and width are dynamic
<ul>
<li style='margin:30px;width:100px;'>Pic</li>
<li style='margin:40px;width:200px;'>Pic</li>
<li style='margin:10px;width:500px;'>Pic</li>
<li style='margin:50px;width:300px;'>Pic</li>
</ul>

如何制作一个将 li 索引作为输入的 jquery 函数，它将返回所有 li 从开始到该索引的宽度 + 边距 'left + right'

Examples // something like this   
myFunction(1); //output 440 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 100 width [0] + 200 width [1] )) 

myFunction(2); //output 960 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 10 margin-left [2] + 10 margin-right [2] + 100 width [0] + 200 width [1] + 500 width [2] )) 

Answer 1

您正在寻找 outerWidth(true)

例如

$('li:eq(0)').outerWidth(true)

如果您不想要边距，而只想要填充和边框，只需执行 outerWidth()

因此，您通常只需将 li 的 outerWidth 相加即可得到它们的总和。