Как найти ближайшего предка, который имеет положение: абсолютное или положение: относительное - PullRequest
Новая
       36

Как найти ближайшего предка, который имеет положение: абсолютное или положение: относительное

0 голосов
/ 02 января 2019

Я пытаюсь найти способ в инструментах разработчика Chrome найти родительский элемент с позицией относительной или абсолютной для элемента в фокусе, который позиционирует себя абсолютно.Я нашел .postionParent в Javascript, чтобы получить эту информацию, но есть ли способ получить эту информацию в Chrome FF, не оглядываясь вручную через всех родителей, чтобы найти родителя с относительным положением?Спасибо - Мерлин

1 Ответ

0 голосов
/ 03 января 2019

Ниже приведен пример простого скрипта, который будет console.log о первом появлении родителя с позицией либо абсолютной, либо относительной.

Чтобы использовать это правильно, измените currentElement с помощью селектора, который подходит вашему элементу, который вы хотите видеть родителем, или вы можете сделать это классным способом:

Откройте dev-tools и проверьте ваш элемент. Элемент теперь будет выделен серым цветом, а == $0 появится позади. Это означает, что вы можете обратиться к этому элементу в консоли, просто набрав $0.

Теперь, когда элемент выбран в dev-tools. Скопируйте приведенный ниже скрипт в консоль разработчика и перед выполнением измените currentElement на currentElement = $0.

Выполните скрипт (нажмите enter) и подождите, пока элемент не будет зарегистрирован в консоли.

Когда элемент зарегистрирован, вы можете навести его на консоль, чтобы увидеть его на своей странице. Если вы не видите, как элемент выделяется на вашей странице, вы можете щелкнуть правой кнопкой мыши зарегистрированный элемент консоли и выбрать «Scroll to view» 

console.log('started searching')
let currentElement = document.getElementById('test')
let run = true
const values = ['absolute', 'relative']

while (run) {
  const elementPositionValue = window.getComputedStyle(currentElement).getPropertyValue('position')
  const hasValueWeWant = values.includes(elementPositionValue)

  if (currentElement.tagName === "BODY" && !hasValueWeWant) {
    console.log('No elements with', values)
    run = false
  }

  if (hasValueWeWant) {
    console.log('Found element: ', currentElement)
    run = false
  } else {
    currentElement = currentElement.parentElement
  }
}
<div>
  <div>
    <div style="position:relative;">
      <div>
        <div>
          <div>
            <div>
              <p id="test">
                crazy indented
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...