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

-1

是的，这很可能是重复的，但请先阅读我的问题，然后再将其标记为正确。如何获得H1标签内文本的宽度？

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

•使用jQuery的$（“＃this”）.width（）方法。它返回一个接近我的屏幕宽度的值。

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

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

•设置显示：内嵌块并尝试。没有运气。

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

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

•用p切换h1并请求该值。不用找了。（和应用样式）

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

我试图实现的是标题的中心对齐。我知道我可以设置位置：相对，但是在垂直定位标题时会遇到麻烦。

小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文件中这样做不起作用。元素确实被选中，因为字体和颜色的修改是可见的。

来源

2015-11-18 V3D3

这个问题有点混乱 - 你能提供一些你的html，所以我们可以看到什么你正在与？ – OliverRadini

只是好奇...你为什么需要知道*文本节点*的宽度，而不是围绕它的“父”元素？ –

https://jsfiddle.net/4m2t1b2q/设置显示为内嵌作品 –

这里：它工作正常，如果你有显示：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>

来源

2015-11-18 14:10:13

给我们你的HTML，我们将拭目以待。 $（“h1”）。width（），如果H1没有被操作，总是100％的容器，因为它是一个显示块元素。它就像$（“div”）.width（）和所有其他显示块elem。

HTML

<h1 id="normal">TEST</h1> 
<h1 id="inline" style="display: inline">TEST2</h1>

alert($("#normal").width()); 
alert($("#inline").width());

第一个提醒会 “满容器”（544对我来说），第二个更小的一个（98对我来说）

看HERE

来源

2015-11-18 14:10:37 RiccardoC

嗯...似乎工作。那么我的代码有什么问题？ – V3D3

您的代码非常小且不完整。这个错误可能无处不在...尝试将更多真实的html和真正的js放在一起。它可能非常简单，就像忘了包含js库一样。请记住，在大多数浏览器中，只有一个js错误，将会停止所有js的执行。 – RiccardoC

好吧，那么将全部通过它。谢谢... – V3D3

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

回答

相关问题