将特定元素中的所有文本转换为大写？

Question

我正在尝试将所有表头文本转换为大写但不成功。

<table>
<tr>
<th>product name</th>
<th>product id</th>
....

我的脚本如下：

<script>
var x = document.getElementByTagName('th').innerHTML;
document.write(x.toUpperCase());
</script>

请帮助....我正在学习JS，并且对这个简单的事情几乎感到沮丧。

Answer 1

我会考虑使用CSS代替javascript。

th {
  text-transform: uppercase;
}

Answer 2

如果只是为了演示，你可能更好的只使用CSS：

th {
  text-transform: uppercase;
}

但如果你真的需要在JS中做到这一点：

var headers = document.getElementsByTagName("th");
for (var i = 0; i < headers.length; i++) {
  var header = headers[i];
  header.innerHTML = header.innerHTML.toUpperCase();
}

您的代码存在的问题是方法getElementByTagName不存在。你必须获取所有的s，循环遍历它们并将其应用到每个s。

Answer 3

的 jsFiddle Demo 的

正如布兰登指出的那样，你应该用css做到这一点。但是，如果你想要一个如何做的js例子：

var headers = document.getElementsByTagName('th');
for( var i = 0, len = headers.length; i < len; i++ ){
 headers[i].innerHTML = headers[i].innerHTML.toUpperCase();
}