查找 div 相对于 window 的左侧位置

Question

我想找到 div 相对于 window 的左侧位置。

我是这样做的

 var diff = ($('.content-wrapper').outerWidth(true) - $('.content-wrapper').outerWidth()) ;

这工作正常，但我想看看是否有更好的方法？

如有任何建议或帮助，我们将不胜感激。

提前致谢

Answer 1

使用 offset() 方法

var diff = $('.content-wrapper').offset().left - $(window).scrollLeft();

Answer 2

您可以使用 getBoundingClientRect.

function getOffsetLeft() {
  var testDiv = document.getElementById("test");
  document.getElementById("demo").innerHTML = testDiv.getBoundingClientRect().left;
}

html, body {
  margin: 0;
}

#test {
  left: 100px;
  margin: 10px;
  padding: 10px;
  width: 300px;
  position: relative;
  border: 5px solid black
}

<div id="test">
  <p>Click the button to get getBoundingClientRect().leftt for the test div.</p>
  <p><button onclick="getOffsetLeft()">Try it</button></p>
  <p>offsetLeft is: <span id="demo"></span></p>
</div>

Answer 3

使用getBoundingClientRect.

var left = document.querySelector('div').getBoundingClientRect().left;

Answer 4

仅此代码就足够了

$('.content-wrapper').offset().left

我已经使用以下代码进行了测试

html, body {
  margin: 0;
}    
.content-wrapper{
            position: relative;
            left: 100px;
            width: 200px;   
            height: 200px;
            border: 1px solid black;
        }

<div style="position:relative; left: 40px; width: 500px;height:auto; border: 1px solid black;">dfgdfgdf
 <div class="content-wrapper">
 dfs sf dsfds fsdfdsf
 </div>
 </div>

我正在离开，包括 parent 的边框。

result is : 141 [ self div left is 100 + parrent div border 1 + parrent div left 40 ]

查找 div 相对于 window 的左侧位置

Finding div left position relative to window

html

javascript

css

jquery

screen-orientation