3

Здравствуйте. Столкнулся с неоднозначностью getBoundingClientRect(). А именно: есть div c id c1 в коде console.log(c1.getBoundingClientRect().x); в консоль выводит 244, но в консоли если ввести c1.getBoundingClientRect().x выведет 122, правильное значение консольное. В чем тут дело?

отступ от края окна

alert(c1.getBoundingClientRect().x);

консоль

console.log(c1.getBoundingClientRect().x)
.sector{
  display: flex;
  flex-direction:row;  
  min-width: 100px;
}
.spring{
  position: relative;
  display: block;
  width: calc((100vw - 100vh) / 2);
  background-color: green;
}
.q1{
  background-color: blue;
}
.content{
  min-width: 30px;
  max-width: 100px;
  overflow: hidden;
  background-color: yellow;
}
#c1{
  height:30px;
  width:30px;
  background-color:red;
}
 <div class="sector">
<div class="spring"></div>
  <div class="content">
    <div id="c1"></div>
  </div>
<div class="spring q1"></div>
 </div>

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Nofate
    16 окт 2017 в 12:53

1 ответ 1

2

Дело в том, что когда ты открываешь консоль, размер окна изменятся и элемент сдвигается. Поэтому с закрытой консолью значение 244, а с открытой - 122.

Вынес <script> за <body> и везде стало 122

Значит были стили, которые подключались после скрипта, либо назначались этому элементу другим скриптом. Соответственно на момент первого вычисления они ещё не были применены, а при проверки руками из консоли - уже были.

17
  • Ну и за что минус?
    – Qwertiy
    16 окт 2017 в 10:10
  • консоль тут не причем 16 окт 2017 в 10:10
  • она в отдельном открыта 16 окт 2017 в 10:10
  • @JarryRoxwell, тогда добавь в вопрос сниппет, на котором можно было бы увидеть описанное в вопросе поведение.
    – Qwertiy
    16 окт 2017 в 10:11
  • 1
    ну вот я тебе уже сказал, лучше добвь код, виднее будет
    – Air
    16 окт 2017 в 10:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.