如何获得实际宽度td表

Question

我用html创建了一个表，table宽度为988 px，tr宽度为100% table宽度。

在表标签中存在5个td标签，这个td标签的宽度为20%。

当我使用jQuery (td标记)使用这些标记时，在控制台中显示如下：

198 
197 
198 
197 
198

但是我在控制台197.59中看到了这个标签宽度。

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

Answer 1

比element.offsetWidth更精确的是：

element.getBoundingClientRect().width

它显示浏览器呈现的精确宽度。

参考资料：getBoundingClientRect

Answer 2

当向您显示规范时，浏览器不会使用作为一个单元。最小的单位对他们来说是一个完整的像素。

为什么？

设置一个具有position:relative CSS属性的元素。相对于整个文档，元素将被定位在一些非常精确的值上，但是这些值在像素单元中被舍入，因为为每个定位值显示left:145.21542258854755124554px是没有意义的。

在拖动元素并跟踪它们的实际位置时，可以看到这些值。

但是： http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units.(W3C)

备注:演示中的，如果放大足够近，将看到两个有色div元素之间的差异，即使存在0.4px差异。

放大400% - 0.4px差：

​

​

现场演示

输出：

196px 195px 195px 195px 195px

HTML

<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>

JavaScript

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";
}

CSS

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;
}

Answer 3

问题是，这是页面呈现它们的方式，所以这就是jQuery将报告的内容。您不能拥有像素的.59，因此它将生成<td>，使其舍入整数，从而使它们与您看到的像素不同。你可以考虑把它们加起来然后平均起来吗？否则，请查看DOM报告的内容。