如何将标题(标题)文本更改为大写?

Question

>我正在尝试更改所有标题，即h1，h2，h3...使用 JavaScript 进行uppercase。

the white cat应该是THE WHITE CAT.

该方法将放在单独的.js文件中。

Answer 1

在 JavaScript 中，您需要使用document.getElementById或document.getElementsByClassName来引用对象。之后，您可以通过访问对象的style属性来设置元素样式，或者只需使用 JavaScript 具有的内置toUpperCase()函数将内容设置为大写。

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的要求，代码略有更改，以在单击按钮时将文本更改为大写

此处的函数将使用 getElementsByTagName 查找h1到h6类型的所有标签，并根据您的要求将其中的所有文本设置为大写。同样，我宁愿添加一个大写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

也许是这样的？
参考： https://www.w3schools.com/jsref/jsref_touppercase.asp

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

编辑-- 或者你可以通过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>