Jquery 如何获得td表的实际宽度

我用html创建了一个表，这个

表

宽度为988 px，

tr

宽度为100%

表

宽度

表中有5个标签，标签宽度为20%

当我使用jQuery（

td

tag）获取这些标记时，请在控制台中显示：

198 
197 
198 
197 
198

但我在console中看到这个标签宽度197.59

---

我想要得到的是这个值，而不是这些197或198。

问题是，页面是如何呈现它们的，所以jQuery将报告这个值。你不能有一个像素的.59，因此它将生成

s以四舍五入到一个整数，导致它们相差一个像素，如你所见。你可以考虑把它们全部加起来并平均吗？否则，请查看DOM报告。

当向您显示规格时，浏览器不会使用分形像素作为单位。最小的单位是它们的整个像素

var tblW = parseInt($('table').css('width'), 10);
var tdW = new Number(0.20);
var pxtdW =  tblW * tdW;
alert(pxtdW);

为什么？ 使用

position:relative

CSS属性设置元素。相对于整个文档，元素将被定位在一些非常精确的值上，但这些值是以像素为单位向上取整的，因为对于每个定位值显示

left:145.215422588544755124554px

是没有意义的

拖动元素并跟踪其实际位置时，可以看到这些值

---

但是：。（W3C）

注意：在演示中，如果放大足够近，您将看到两个彩色

div

元素之间的差异，即使存在0.4px差异

放大到400%-0.4倍的差异：

输出：

---

HTML CSS

---

比

元素更精确。offsetWidth

为：

element.getBoundingClientRect().width

它显示浏览器渲染的精确宽度

---

MDN reference:

对不起，我只是假设如果您使用的是jQuery-您知道javascript。在jquery中，它将是：

$（'table td'）[0].getBoundingClientRect（）.width

。你可以在我给你的参考链接中阅读更多内容。

<table>
    <tbody>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody>
</table>
<div id="output"></div>
<div id="int">a</div>
<div id="float">a</div>

var tds = document.getElementsByTagName('td');


for (var td in tds) {
    if (tds[td].nodeType == 1) 
        document.getElementById('output').innerHTML += parseFloat(tds[td].offsetWidth,10) + "px";
}

table {
    width: 988px;
    padding:0;
    margin:0;
}
tr {
    width:100%;
    padding:0;
    margin:0;
}
td {
    width:20%;
    padding:0;
    margin:0;
}
#int {
    width:21px;
    background-color:red;
}  
#float {
    width:21.4px;
    background-color:blue;
}

element.getBoundingClientRect().width