Como pegar a distância de um elemento em relação ao elemento pai?
26/12/2017
0
Bom dia a todos, tenho uma dúvida.
Quero pegar a distância de um elemento em relação ao seu elemento pai. Não quero pegar a posição do elemento na tela, e sim em relação ao seu pai. Por exemplo, nesse exemplo, quero pegar o a posição de cada h3 dentro da div com o id programações. Essa div está a 150px do topo documento.
Como posso pegar a posição de cada h3 nesse caso
Quero pegar a distância de um elemento em relação ao seu elemento pai. Não quero pegar a posição do elemento na tela, e sim em relação ao seu pai. Por exemplo, nesse exemplo, quero pegar o a posição de cada h3 dentro da div com o id programações. Essa div está a 150px do topo documento.
<div id="programacoes"> <h3 class="titulo-programacao">Programação 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae augue at nisi hendrerit commodo ac sit amet eros. Quisque lobortis justo eu faucibus efficitur. Maecenas dapibus, dui malesuada gravida luctus, quam sem mollis quam, eu interdum metus odio in mi. Maecenas vestibulum massa diam. Proin at elementum risus. Aliquam molestie odio quis diam luctus porta. Sed eget lorem nec nunc mollis mattis. Nunc eget laoreet est. Vestibulum auctor dignissim quam a venenatis. Aenean sit amet euismod dui, a mollis erat. Donec nibh nulla, vulputate et leo eget, posuere porttitor nunc. Mauris ultricies interdum elit non mollis. Pellentesque mattis nulla erat, sit amet sodales ex euismod a.</p> <h3 class="titulo-programacao">Programação 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae augue at nisi hendrerit commodo ac sit amet eros. Quisque lobortis justo eu faucibus efficitur. Maecenas dapibus, dui malesuada gravida luctus, quam sem mollis quam, eu interdum metus odio in mi. Maecenas vestibulum massa diam. Proin at elementum risus. Aliquam molestie odio quis diam luctus porta. Sed eget lorem nec nunc mollis mattis. Nunc eget laoreet est. Vestibulum auctor dignissim quam a venenatis. Aenean sit amet euismod dui, a mollis erat. Donec nibh nulla, vulputate et leo eget, posuere porttitor nunc. Mauris ultricies interdum elit non mollis. Pellentesque mattis nulla erat, sit amet sodales ex euismod a.</p> <h3 class="titulo-programacao">Programação 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae augue at nisi hendrerit commodo ac sit amet eros. Quisque lobortis justo eu faucibus efficitur. Maecenas dapibus, dui malesuada gravida luctus, quam sem mollis quam, eu interdum metus odio in mi. Maecenas vestibulum massa diam. Proin at elementum risus. Aliquam molestie odio quis diam luctus porta. Sed eget lorem nec nunc mollis mattis. Nunc eget laoreet est. Vestibulum auctor dignissim quam a venenatis. Aenean sit amet euismod dui, a mollis erat. Donec nibh nulla, vulputate et leo eget, posuere porttitor nunc. Mauris ultricies interdum elit non mollis. Pellentesque mattis nulla erat, sit amet sodales ex euismod a.</p> <h3 class="titulo-programacao">Programação 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae augue at nisi hendrerit commodo ac sit amet eros. Quisque lobortis justo eu faucibus efficitur. Maecenas dapibus, dui malesuada gravida luctus, quam sem mollis quam, eu interdum metus odio in mi. Maecenas vestibulum massa diam. Proin at elementum risus. Aliquam molestie odio quis diam luctus porta. Sed eget lorem nec nunc mollis mattis. Nunc eget laoreet est. Vestibulum auctor dignissim quam a venenatis. Aenean sit amet euismod dui, a mollis erat. Donec nibh nulla, vulputate et leo eget, posuere porttitor nunc. Mauris ultricies interdum elit non mollis. Pellentesque mattis nulla erat, sit amet sodales ex euismod a.</p> <h3 class="titulo-programacao">Programação 5</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae augue at nisi hendrerit commodo ac sit amet eros. Quisque lobortis justo eu faucibus efficitur. Maecenas dapibus, dui malesuada gravida luctus, quam sem mollis quam, eu interdum metus odio in mi. Maecenas vestibulum massa diam. Proin at elementum risus. Aliquam molestie odio quis diam luctus porta. Sed eget lorem nec nunc mollis mattis. Nunc eget laoreet est. Vestibulum auctor dignissim quam a venenatis. Aenean sit amet euismod dui, a mollis erat. Donec nibh nulla, vulputate et leo eget, posuere porttitor nunc. Mauris ultricies interdum elit non mollis. Pellentesque mattis nulla erat, sit amet sodales ex euismod a.</p> </div>
Como posso pegar a posição de cada h3 nesse caso
Caio Monteiro
Curtir tópico
+ 0
Responder
Posts
26/12/2017
Kelvin Andrade
Olá Caio,
É possível ver qual o valor que cada elemento recebeu através do console do navegador. Clique com o botão direito no elemento e depois escolha "inspecionar". Ao lado direito tem uma aba "Computed" (computado), lá é possível ver quanto o elemento tem de margem, borda, padding e conteúdo.
Escrever um código que pega a posição do elemento na página, pode causar muitos problemas, pois há diversos tamanhos de tela, talvez esta não seja a melhor solução para o que você quer fazer. Espero ter ajudado!
É possível ver qual o valor que cada elemento recebeu através do console do navegador. Clique com o botão direito no elemento e depois escolha "inspecionar". Ao lado direito tem uma aba "Computed" (computado), lá é possível ver quanto o elemento tem de margem, borda, padding e conteúdo.
Escrever um código que pega a posição do elemento na página, pode causar muitos problemas, pois há diversos tamanhos de tela, talvez esta não seja a melhor solução para o que você quer fazer. Espero ter ajudado!
Responder
27/12/2017
Caio Monteiro
Olá Kelvin, obrigado por responder. Mas esse problema não pode ser resolvido num layout responsivo?
Responder
Clique aqui para fazer login e interagir na Comunidade :)
