Question

我正在尝试实现辅助功能工具，并且我已经设法在单击按钮后更改段落的字体大小但我尝试更改代码以便它可以在所有段落上工作并且它不起作用

<script>

function myFunction()

{
 var p =document.getElementsByTagName('p'); // Find the element
p.style.fontSize="1.5em";          // Change the style
}
</script>

<button type="button" style="background: #ccc url(images/small.jpg);  padding: 0.3em 1em"   onclick="myFunction()"></button>

这就是之前只有一个段落的工作方式，但我尝试的不止一个：

<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.fontSize="3.0em";          // Change the style
}
</script>

Answer 1

getElementsByTagName返回一个NodeList，就像一个数组，所以你必须遍历它们并将样式应用于每个元素：

function myFunction() {
    var arr = document.getElementsByTagName('p');
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.fontSize = "1.5em";
    }
}

Answer 2

你在第一个代码块中的问题是getElementsByTagName返回一个元素的nodeList（你可以假装它是一个数组）。所以你需要这样做：

var p =document.getElementsByTagName('p'); // Find the element
for(var i=0; i<p.length; i++) {
  p[i].style.fontSize="1.5em";          // Change the style
  }

然而，更好的方法是定义一些css类来为你完成这项工作。

<style>
body { /*normal size*/
  font-size: 1em;
}

body.largeFont {
  font-size: 1.5em;
}
</style>

<script>
function largeFont() {
  document.body.className="largeFont";
}
</script>

使用按钮使用javascript更改整个网站的字体大小

2 个答案: