Как получить ширину текста внутри тега H1?

Question

Да, это, скорее всего, дубликат, но сначала прочтите мою проблему, прежде чем пометить ее как таковую.

После двух часов поиска я очень расстраиваюсь. Я пробовал следующее:

• Используется метод jQuery $ ("# this"). Width(). Он возвращает значение, близкое к ширине экрана.

• Используется метод this.offsetWidth JavaScript. То же самое происходит.

• Установите дисплей: встроенный в качестве стиля для h1 и попробуйте первые два метода. Не работает. Возвращаются те же значения.

• Установите дисплей: встроенный блок и попробуйте. Не повезло.

• Установите отступы и поля на 0. Нежелательный результат снова.

• Пробовал получать значение с помощью innerWidth. Все такой же.

• Переключил h1 с p и запросил значение. Без изменений. (И прикладные стили тоже)

В настоящее время я собираюсь заменить все заголовки отключенными кнопками, но одинаковыми стилями, но это будет очень неудобно и немного помешает анимации на странице.

То, что я пытаюсь достичь, - это выравнивание по центру для заголовка. Я знаю, что могу установить положение: относительное, но тогда будут проблемы при вертикальном позиционировании заголовка.

Немного 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();

EDIT: Я попробовал встроенный метод снова. Не работал. Но я обнаружил это: Когда я использовал метод css jQuery для установки отображения: inline, значение было правильно возвращено (45 в моем случае), но это в CSS-файле не работает. Элемент действительно выбирается, поскольку видны изменения шрифта и цвета.

Answer 1

здесь: она отлично работает, если у вас есть дисплей: встроенный блок

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

HTML

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

JS

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

Первое предупреждение будет "полный контейнер" (544 для меня), а второй поменьше (98 для меня)

Look HERE