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

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，这是像一个数组，所以你h通过他们AVE循环和样式应用到每一个元素：

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

Answer 2

你的第一个代码块的问题是，返回的getElementsByTagName元素的节点列表（你可以假装是一个数组）。所以你需要这样做：

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>