如何将标题（标题）文本更改为大写？答案

【问题标题】：How to change the heading (titles) text to uppercase?如何将标题（标题）文本更改为大写？
【发布时间】：2018-05-10 17:24:39
【问题描述】：

我正在尝试使用 JavaScript 将所有标题，即 h1、h2、h3... 更改为 uppercase。

the white cat 应该是THE WHITE CAT。

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

【问题讨论】：

那么你尝试了什么？实际上需要零个 JS。
Easier than JS
需要在js文件中。
该行是
Katt
我想使用 js 单独文件将其设为大写，我已经将文件链接到html

标签： html uppercase

【解决方案1】：

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

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

&lt;h1 id="myHeader"&gt;Hello, world&lt;/h1&gt;

但是

更简单的解决方案是在整个标头对象上设置一个类，然后使用

.upperCaseHeader { text-transform: uppercase}

或者，如果您知道页面上的所有标题元素都是大写的，请使用；

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

在 CSS 文件中。

编辑：应 OP 的要求，代码稍作更改，以便在单击按钮时将文本更改为大写

这里的函数将使用getElementsByTagName 查找h1 到h6 类型的所有标签，并按照您的要求将其中的所有文本设置为大写。同样，我宁愿添加 text-transform 大写的类，并动态添加和删除此类，但由于您有非常具体的需求，我现在在这里发布这个替代解决方案。

Here 也是一支工作笔

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>

【讨论】：

我正在尝试在输出 html 文件中创建一个按钮，单击该按钮会更改标题。标题应改为大写。我已经制作了按钮并且它起作用了。我已经制作了更改 html 文件中特定单词的按钮，现在我需要使用 js 文件将所有标题设为大写。
您可以在按钮的onclick 事件上执行此操作。我的代码有什么问题？
@DhulfiqarH.Al-Hussan 查看更新的答案以找到您要查找的代码。

【解决方案2】：

在你的 style.css 中

h2 {
text-transform: uppercase;
}

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

试试这个内联样式：

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

【讨论】：

Katt