如何在具有填充的div中获取文本的位置

Question

I have a text inside the div which is having padding of some pixels, What i am trying to do is that i'm adding one more text just out of that div and indent the newly added text to the text inside div.

Here in the jquery code i'm trying to get the position of the text inside the div, but i'm not able to get the actual position of the text inside the div, instead its giving the position of where the div actually starts.

How can i get the actual position of the text inside the div?

here is what i have tried.

 $(document).ready(function(){ console.log($('.banner-heading-text').position().top); console.log($('.banner-heading-text').position().left); });

 .banner-heading-text{ padding:10px 39px; color:red; font-size:3.4rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="banner-heading-text"> Here is the banner heading text </div>

Answer 1

You can't select the text and get the posiotion of it.

The only way I see is to wrap the text with a span eg

 $(document).ready(function(){ alert($('.banner-heading-text span').position().top); alert($('.banner-heading-text span').position().left); });

 .banner-heading-text{ padding:10px 39px; color:red; font-size:3.4rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="banner-heading-text"> <span>Here is the banner heading text</span> </div>

Answer 2

You can't get the position value of a non-element. You either have to put a span inside the text.

 <div class="banner-heading-text">
    <span>Here is the banner heading text<span>
 </div>

And do

$(document).ready(function(){
    console.log($('.banner-heading-text > span').position().top);
    console.log($('.banner-heading-text > span').position().left);
});

or else add the padding in the resulting position value

$(document).ready(function(){
    var paddingLeft = $('.banner-heading-text').css('padding-left');
    var paddingTop = $('.banner-heading-text').css('padding-top');
    console.log($('.banner-heading-text').position().top + paddingTop);
    console.log($('.banner-heading-text').position().left + paddingLeft);
});

Answer 3

您可以将填充值添加到 div 位置：

$('.banner-heading-text').css('padding-left') + $('.banner-heading-text').position().left

Answer 4

 $(document).ready(function(){ $banner = $('.banner-heading-text'); const topPos = $banner.position().top; const leftPos = $banner.position().left; const topPadding = parseInt($banner.css('paddingTop')); const leftPadding = parseInt($banner.css('paddingLeft')); const textPositionTop = topPos + topPadding; const textPositionLeft = leftPos + leftPadding; console.log(textPositionTop, textPositionLeft); });

 .banner-heading-text{ padding:10px 39px; color:red; font-size:3.4rem; }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div class="banner-heading-text"> Here is the banner heading text </div>