6

html で 1 つのテーブルを作成します。このtable幅は 988 ピクセルで、tr幅は 100%tableです。

テーブルタグtdには、このtdタグ幅が 20% のタグが 5 つ存在します。

jQuery（tdタグ）でこれらのタグを取得すると、コンソールに次のように表示されます：

198 
197 
198 
197 
198

しかし、コンソール197.59でこのタグの幅が表示されます。

これらの 197 または 198 ではなく、この値を取得します。

4

4 に答える 4

12

より正確element.offsetWidth:

element.getBoundingClientRect().width

ブラウザによってレンダリングされた正確な幅を示しています。

MDN リファレンス: getBoundingClientRect

于 2013-07-24T15:58:50.787 に答える
3

ブラウザーは、仕様を表示するときに小数ピクセルを単位として使用しません。彼らにとって最小単位はピクセル全体です。

なんで？

position:relativeCSS 属性を持つ要素を設定します。left:145.21542258854755124554pxドキュメント全体に対して、要素はいくつかの非常に正確な値で配置されますが、すべての配置値を表示するのは意味がないため、それらはピクセル単位で切り上げられます。

要素をドラッグして実際の位置を追跡すると、これらの値を確認できます。

ただし: ブラウザは依然として小数ピクセルを読み取ります。( W3C )

注:デモでは、十分にズームインすると、 0.4 ピクセルの違いがあっても、2 つの色付き要素の間に違いが見られます。div

400% にズーム - 0.4 ピクセルの差:

400% にズーム - 0.4 ピクセルの差。

ライブデモ

出力：

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;
}
于 2013-07-24T15:47:23.130 に答える
1

問題は、それがページのレンダリング方法であるため、jQuery が報告することです。ピクセルの .59 を使用することはできないため<td>、整数に丸めるために s が生成され、ご覧のように 1 ピクセルずつ異なります。それらをすべて加算して平均化することを検討できますか？それ以外の場合は、DOM が報告する内容を見てください。

于 2013-07-24T15:38:35.733 に答える
0 
var tblW = parseInt($('table').css('width'), 10);
var tdW = new Number(0.20);
var pxtdW =  tblW * tdW;
alert(pxtdW);
于 2013-07-24T15:38:24.183 に答える