jquery - How to get real width td table

Question

I create one table in html and this table width is 988 px and tr width is 100% table width.

In table tag exist 5 td tag that this td tag width 20%.

When I get with these tags with jQuery (td tag) show me in console this :

198 
197 
198 
197 
198

but I see this tags width in console 197.59.

I want get this value not these 197 or 198.

Answer 1

比以下更精确element.offsetWidth：

element.getBoundingClientRect().width

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

MDN 参考：getBoundingClientRect

Answer 2

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

为什么？

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

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

---

但是： 浏览器仍然读取小数像素。( 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 将报告的内容。您不能拥有 0.59 个像素，因此它将生成<td>s 以四舍五入为整数，从而导致它们相差一个像素，如您所见。您可以考虑将它们全部加起来并取平均值吗？否则，请查看 DOM 报告的内容。

Answer 4

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