Нахождение div левой позиции относительно окна

Question

Я хочу найти левую позицию div относительно окна.

Я делаю так

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

Это работает нормально, но я хочу посмотреть, есть ли лучшие способы сделать это?

Любое предложение или помощь будут оценены.

Заранее спасибо

Answer 1

достаточно только этого кода

$('.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>

Я ухожу, включая границу родителя.

результат: 141 [оставшееся деление слева равно 100 + граница разделенного деления 1 + разделение оставлено слева 40]

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

Использовать метод смещения ()

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