HTMLElement: offsetLeft ìì±
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015ë 7ì.
HTMLElement.offsetLeft ì½ê¸° ì ì© ìì±ì íì¬ ììì ì¼ìª½ ìë¨ ëª¨ìë¦¬ê° HTMLElement.offsetParent ë
¸ë ë´ìì ì¼ìª½ì¼ë¡ ì¼ë§ë ë¨ì´ì ¸ ìëì§ë¥¼ í½ì
ìë¡ ë°íí©ëë¤.
ë¸ë¡ ë 벨 ììì ê²½ì° offsetTop, offsetLeft, offsetWidth, offsetHeightë offsetParent를 기ì¤ì¼ë¡ ììì í
ë리 ìì를 ì¤ëª
í©ëë¤.
íì§ë§ span ê°ì´ í ì¤ìì ë¤ì ì¤ë¡ ê°ì¸ì§ ì ìë ì¸ë¼ì¸ ë 벨 ììì ê²½ì° offsetTopê³¼ offsetLeftë 첫 ë²ì§¸ í
ë리 ììì ìì¹ë¥¼ ì¤ëª
íê³ (ëë¹ì ëì´ë¥¼ ê°ì ¸ì¤ê¸° ìí´ Element.getClientRects() ì¬ì©), offsetWidthì offsetHeightë ê²½ê³ í
ë리 ììì ì¹ì를 ì¤ëª
í©ëë¤ (ìì¹ë¥¼ ê°ì ¸ì¤ê¸° ìí´ Element.getBoundingClientRect() ì¬ì©). ë°ë¼ì ì¼ìª½, ì쪽, ëë¹, ëì´ê° offsetLeft, offsetTop, offsetWidth, offsetHeightì¸ ììë í
ì¤í¸ë¡ ê°ì¸ì§ spanì ê²½ê³ ììê° ëì§ ììµëë¤.
ê°
ì ìì ëë¤.
ìì
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;
if (tOLeft > 5) {
// í° ì¼ìª½ ì¤íì
: ì¬ê¸°ì 무ì¸ê°ë¥¼ íì¸ì.
}
ì´ ìì ë íëì í ëë¦¬ê° ìë div ìì ëë¬ì¸ì¸ 'long' 문ì¥ê³¼ spanì ê²½ê³ë¥¼ ì¤ëª í´ì¼ í ê²ì¼ë¡ ìê°íë 빨ê°ì ìì를 ë³´ì¬ì¤ëë¤.
<div
style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
<span>Short span. </span>
<span id="longspan">Long span that wraps within this div.</span>
</div>
<div
id="box"
style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>
<script>
const box = document.getElementById("box");
const longspan = document.getElementById("longspan");
box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
box.style.width = longspan.offsetWidth + "px";
box.style.height = longspan.offsetHeight + "px";
</script>
ëª ì¸ì
| Specification |
|---|
| CSSOM View Module # dom-htmlelement-offsetleft |