javascript - 如何获取H1标签内文本的宽度？

Question

是的，这很可能是重复的，但请在标记之前先阅读我的问题。

经过两个小时的搜索，我对此感到非常沮丧。 我尝试了以下方法:

• 使用了 jQuery 的 $("#this").width() 方法。它返回一个接近我的屏幕宽度的值。

• 使用了 JavaScript 的 this.offsetWidth 方法。同样的事情发生。

• 将display: inline 设置为h1 的样式并尝试了前两种方法。没用。返回相同的值。

• 设置显示:内联 block 并尝试过。运气不好。

• 将填充和边距设置为 0。再次出现不需要的结果。

• 尝试使用 innerWidth 获取值。还是一样。

• 将 h1 与 p 切换并请求该值。不用找了。 (也应用了样式)

目前，我正在考虑用相同样式的禁用按钮替换所有标题，但是，这会非常不方便，并且会对页面上的动画产生一些干扰。

我想要实现的是标题的居中对齐。我知道我可以设置 position: relative，但是在垂直定位标题时会遇到麻烦。

一些 HTML:

    <h1 class="preload" id="interactor"> Hi!</h1>
    <h1 id="screenWidth"></h1>

在 CSS 中:

h1.preload  {
    position: absolute;
    top: -20%; /* later gets animated */
    display: inline;
}

JavaScript:

    //just testing
    var sW = window.innerWidth;
    document.getElementById("screenWidth").innerHTML = sW;
    document.getElementById("interactor").innerHTML = $("#interactor").width();

编辑: 我再次尝试了内联方法。不工作。 但是，我发现了这一点: 当我使用 jQuery 的 css 方法设置 display: inline 时，值被正确返回(在我的例子中是 45)，但是在 CSS 文件中这样做是行不通的。不过，该元素确实被选中，因为字体和颜色的修改是可见的。

Answer 1

这里:如果你有 display: inline-block，它工作正常

$(function(){
  $h1 = $("h1");
  $("#result").text("width:"+$h1.width()+"px - inner width"+$h1.innerWidth()+"px");
});

h1{
  display:inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Foo Bar</h1>
<p id="result"></p>