如何在 css 中不初始化的情况下获取左值？

Question

Basically I need to identify, how far is an element from left corner in pixel while the element style in css is left:auto

eg:

<span id='span1'>
   <span id='child1'>hello there </span>
   <span id='child2'>get left value of this DOM</span>
</span>

CSS:

#child1{
  background:red;  
}
#child2{
  background: green;
}

is there anyway to find out the left value of child2 in either javascript or jquery?

DEMO: https://jsfiddle.net/7wp5fc6r/

Answer 1

With Javascript you can get this value and more with getBoundingClientRect() this is the documentation of this method, this is an example:

 const childTwo = document.getElementById("child2"); const leftSpace = childTwo.getBoundingClientRect().left; console.log("space in pixels", leftSpace)

 #child1{ background:red; } #child2{ background: green; }

 <span id='span1'> <span id='child1'>hello there </span> <span id='child2'>get left value of this DOM</span> </span>