用javascript更改字體大小

Question

你好我有這段代碼來改變一個段落的字體大小與3個按鈕，我想知道至極方法我可以使用不重複相同的行，並使此代碼更緊湊謝謝你很多:)

window.addEventListener('load', inicio, false); 

function inicio(){ 
var boton1 = document.getElementById('boton1'); 
var boton2 = document.getElementById('boton2'); 
var boton3 = document.getElementById('boton3'); 

boton1.addEventListener('click', fuente10, false); 
boton2.addEventListener('click', fuente13, false); 
boton3.addEventListener('click', fuente20, false); 
} 

function fuente10(){ 
var parrafo = document.getElementById('parrafo'); 
parrafo.style.fontSize='10px' 
} 

function fuente13(){ 
var parrafo = document.getElementById('parrafo'); 
parrafo.style.fontSize='13px' 
} 

function fuente20(){ 
var parrafo = document.getElementById('parrafo'); 
parrafo.style.fontSize='20px' 
} 

我在想for循環，但我不能弄清楚如何做到這一點：/

Answer 1

嘗試像這樣的

window.addEventListener('load', inicio, false); 

function inicio(){ 
var boton1 = document.getElementById('boton1'); 
var boton2 = document.getElementById('boton2'); 
var boton3 = document.getElementById('boton3'); 

boton1.addEventListener('click', function() { setFont("10px");}, false); 
boton2.addEventListener('click', function() { setFont("13px");}, false); 
boton3.addEventListener('click', function() { setFont("20px");}, false); 
} 

function setFont(value){ 
    var parrafo = document.getElementById('parrafo'); 
    parrafo.style.fontSize= value; 
} 

更新 不同的計算策略（未測試，但應工作）

window.addEventListener('load', inicio, false); 
function inicio() { 
    var fontDetails = {"boton1" : "10px" , "boton2" : "13px" , "boton3" : "20px"}; 
    var parrafo = document.getElementById('parrafo'); 
    var domElement = ""; 
    var element = ""; 

    for (element in fontDetails) 
    { 
     domElement = document.getElementById(element); 
     domElement.addEventListener('click', function() { parrafo.style.fontSize= fontDetails[element]; }, false); 
    } 
} 

您也可以刪除窗口加載事件處理程序和功能INICIO並嘗試自我執行這樣

功能

(function() { //your code here })(); 

Answer 2

也許這種變化可以幫助你：

window.addEventListener('load', inicio, false); 

    var boton; 

    function inicio() 
    { 
     modificar('boton1', 10); 
     modificar('boton2', 13); 
     modificar('boton3', 20); 
    } 

    function modificar(id, size) 
    { 
     boton = document.getElementById(id); 
     boton.onclick=function(){fuente(size)}; 
     console.log(boton); 
    } 

    function fuente(size) 
    { 
     var parrafo = document.getElementById('parrafo'); 
     parrafo.style.fontSize=size+'px'; 
    }