亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為 span 調用 getBoundingClientRect 在 Chromium

為 span 調用 getBoundingClientRect 在 Chromium

Cats萌萌 2021-11-04 15:15:26
我有一個<p>元素,里面有一個空的 span 元素,即<span id="marker"></span>. 當我getBoundingClientRect在 Chromium 中請求時,我得到一個帶有<p>元素x,y 坐標的矩形。相反,Firefox 會返回文本內跨度的位置。我能做些什么來找出跨度在 Chromium 中的位置嗎?顯示問題的最小示例:console.log(document.getElementById("paragraph-0").getBoundingClientRect());console.log(document.getElementById("span1").getBoundingClientRect());console.log(document.getElementById("span2").getBoundingClientRect());<p id="paragraph-0">  Lorem ipsum dolor sit amet,<span id="span1"></span>consectetur adipiscing elit. Duis tincidunt purus at vulputate suscipit. Pellentesque magna eros, convallis eget hendrerit at, porta vitae mi. Aenean eu nunc a enim egestas venenatis eget eu purus.  Integer dignissim nibh eget enim tincidunt aliquet. Duis in arcu ornare, imperdiet tortor et, pretium lacus. In lectus risus, rutrum scelerisque blandit et, posuere non ligula. Quisque lectus magna, sodales ac quam a, eleifend tristique sapien. Aenean  id tempor eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non lorem eu dolor semper cursus. Vestibulum porta sem nunc, eget euismod mauris scelerisque non. Integer scelerisque sollicitudin rutrum.  Ut ultricies purus arcu, feugiat ornare lacus varius in. Suspendisse eget risus sed nisi imperdiet ornare in vel urna. Donec eget nunc non mauris tempor malesuada <span id="span2"></span>sed eget lorem.</p>如果我在 Firefox 上運行上面的代碼,我會得到三個不同的矩形,而在 Chromium 中,它們中的三個將是相同的。
查看完整描述

1 回答

?
智慧大石

TA貢獻1946條經驗 獲得超3個贊

在四處探索之后,正如您在 OP 中所指出的那樣,似乎只有在跨度為空且沒有邊框等情況下才會出現問題。


但是,如果 aspan 確實有邊框,則它會正確報告其位置。因此,解決此問題的一種簡單方法是對跨度應用 0.1 像素的透明邊框。


const el1 = document.getElementById("paragraph-0").getBoundingClientRect();

const el2 = document.getElementById("span1").getBoundingClientRect();

const el3 = document.getElementById("span2").getBoundingClientRect();

console.log(el1, el2, el3)

#span1, #span2{

  border:0.1px solid transparent;

}

<p id="paragraph-0">

  Lorem ipsum dolor sit amet,<span id="span1"></span>consectetur adipiscing elit. Duis tincidunt purus at vulputate suscipit. Pellentesque magna eros, convallis eget hendrerit at, porta vitae mi. Aenean eu nunc a enim egestas venenatis eget eu purus.

  Integer dignissim nibh eget enim tincidunt aliquet. Duis in arcu ornare, imperdiet tortor et, pretium lacus. In lectus risus, rutrum scelerisque blandit et, posuere non ligula. Quisque lectus magna, sodales ac quam a, eleifend tristique sapien. Aenean

  id tempor eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non lorem eu dolor semper cursus. Vestibulum porta sem nunc, eget euismod mauris scelerisque non. Integer scelerisque sollicitudin rutrum.

  Ut ultricies purus arcu, feugiat ornare lacus varius in. Suspendisse eget risus sed nisi imperdiet ornare in vel urna. Donec eget nunc non mauris tempor malesuada <span id="span2"></span>sed eget lorem.

</p>


查看完整回答
反對 回復 2021-11-04
  • 1 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號