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>