Question

是的，这很可能是重复的，但请先将我的问题解读，然后再将其标记下来。

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

•使用jQuery的$（＆＃34; #this＆＃34;）。width（）方法。它返回一个接近我的屏幕宽度的值。

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

•设置display：内联作为h1的样式，并尝试了前两种方法。没有工作。返回相同的值。

•设置display：inline-block并尝试。没有运气。

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

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

•用p切换h1并请求值。没变。（也适用于风格）

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

我想要实现的是标题的中心对齐。我知道我可以设置位置：相对，但是在垂直定位标题时会出现问题。

一点HTML：

＆＃13;

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

＆＃13;

在CSS中：

＆＃13;

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

＆＃13;

JavaScript的：

＆＃13;

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

＆＃13;

编辑：我再次尝试了内联方法。不工作。但是，我发现了这个：当我使用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>

Answer 2

给我们你的HTML，我们会看到。 $（“h1”）。width（），如果不操作H1，则始终是其容器的100％，因为它是一个显示块元素。它就像$（“div”）。width（）和所有其他display-block elem。

＆＃xA;＆＃xA;

HTML

＆＃xA;＆＃xA;

 ＆lt; h1 id =“normal”＆gt; TEST＆lt; / h1＆gt;＆＃xA;＆lt; h1 id =“inline”style =“display：inline”＆gt; TEST2＆lt; / h1＆gt;＆＃xA; < / code>

＆＃xA;＆＃xA;  JS 
＆＃xA;＆＃xA;   alert（$（“＃normal”）。width（） ）;＆＃xA; alert（$（“＃inline”）。width（））;＆＃xA;  
＆＃xA;＆＃xA; 第一个提醒将是“完整的容器“（544对我来说），第二个是较小的（对我来说是98）
＆＃xA;＆＃xA; 看 HERE  ＆＃xA;

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

2 个答案: