javascript - 如何获得具有填充的div中文本的位置

Question

我在 div 中有一个文本，它有一些像素的填充，我想做的是从那个 div 中再添加一个文本，并将新添加的文本缩进到 div 内的文本中。

在 jquery 代码中，我试图获取文本在 div 中的位置，但我无法获取文本在 div 中的实际位置，而是给出了 div 所在的位置真正开始。

如何获取文本在 div 中的实际位置？

这是我尝试过的。

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

您不能选择文本并获取它的位置。

我看到的唯一方法是用一个跨度包裹文本，例如

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