0

このコードは Firefox と IE では機能しますが、Chrome や Safari では機能しません (td 16 をクリックしてみてください)。

Q: Chrome または Safari で動作させるにはどうすればよいですか?

<!DOCTYPE html>
<title>getOffset</title>
<style type="text/css">
table{border:none;width:10000px;position:absolute}
td{width:1000px;height:1000px;border:2px solid}
#the_input{width:100px;height:100px;background:#f00;position:absolute}
</style>
<script>
onload = function(){
var all_td = document.getElementsByTagName('td');
function getOffset( el ) {
    var _x = 0,
    _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}




    for(var i = 0, len = all_td.length; i < len; i++) {
        all_td[i].onclick = function () {
            var x = getOffset(this).left,
            y = getOffset(this).top;
                alert(x + ' x ' + y);
        }
    }
}

</script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>

<input id=the_input value="some text">
4

1 に答える 1

1

のコードをに変更するだけgetOffsetです

function getOffset( el ) {
    var _x = 0,
    _y = 0;
    while( el && el.tagName.toLowerCase() != 'body' && !isNaN( el.offsetLeft ) && !isNaN(el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

私がクロムでデバッグしたように、BODY要素の scrollLeft と scrollLeft の値を取得していますが0、IE と FF ではそうです。

于 2012-12-05T05:39:42.777 に答える