Как изменить заголовок (заголовки) текста в верхний регистр?

Question

Я пытаюсь изменить все заголовки, то есть h1, h2, h3 ... на uppercase с использованием JavaScript.

the white cat должно быть THE WHITE CAT.

Метод будет помещен в отдельный файл .js.

Answer 1

В JavaScript вам нужно получить ссылку на объект, используя document.getElementById или document.getElementsByClassName. После этого вы можете стилизовать элемент, обратившись к свойству style объекта, ИЛИ просто установите содержимое в верхний регистр, используя встроенную функцию toUpperCase(), которая есть в JavaScript.

var header = document.getElementById("myHeader");
header.innerHTML = header.innerHTML.toUpperCase();

<h1 id="myHeader">Hello, world</h1>

ОДНАКО

Более простое решение - просто установить класс для всего объекта заголовка и использовать

.upperCaseHeader { text-transform: uppercase}

Или, если вы знаете, что все элементы заголовка на вашей странице будут в верхнем регистре, используйте;

h1,h2,h3,h4,h5 { text-transform: uppercase; }

в файле CSS.

РЕДАКТИРОВАТЬ: По запросу OP код немного изменен, чтобы изменить текст в верхний регистр при нажатии кнопки

Функция здесь найдет все теги типа от h1 до h6, используя getElementsByTagName , и установит весь текст в них в верхнем регистре, как вы и просили. Опять же, я бы предпочел добавить класс с text-transform заглавными буквами, и динамически добавлять и удалять этот класс, но, поскольку у вас есть очень специфические потребности, я публикую это альтернативное решение здесь и сейчас.

Здесь тоже рабочая ручка

function setUppercase() {
  var tags = ["h1", "h2", "h3", "h4", "h5", "h6"];
  for (var i = 0; i < tags.length; i++) {
    var allTagsOfType = document.getElementsByTagName(tags[i]);
    for (var j = 0; j < allTagsOfType.length; j++) {
      allTagsOfType[j].innerText = allTagsOfType[j].innerText.toUpperCase();
    }
  }
}

<h1>Hello</h1>
<h2>I am going</h2>
<h3>to be</h3>
<h4>uppercase</h4>
<h5>soon</h5>
<h6>tiny text</h6>
<button onclick="setUppercase()">Set uppercase</button>

Answer 2

в вашем стиле. Css

h2 {
text-transform: uppercase;
}

Answer 3

Может, как-то так?
ref: https://www.w3schools.com/jsref/jsref_touppercase.asp

var text = $('h2').text();    
var res = text.toUpperCase();
$('h2').text(res); 

Edit-- Или вы можете сделать все через JS и добавить элемент. `` являются строковыми литералами ES6.

var text = "The White Cat";    
var res = text.toUpperCase();
var uppercase = `<h2>${res}</h2>`;
$('body').append(uppercase);

Answer 4

Попробуйте этот встроенный стиль:

<h2 style="text-transform: uppercase"> The White Cate </h2>