0

您好，我有这段代码可以用 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 循环，但我不知道该怎么做：/

4

2 回答 2

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', 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 } )();
于 2013-03-26T05:31:46.237 回答
1

也许这种改变可以帮助你：

    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';
    }
于 2013-03-26T05:30:27.387 回答