[英]change font size with javascript
您好,我有这段代码可以使用3个按钮更改段落的字体大小,我想知道我可以使用wich方法不重复相同的行并使此代码更紧凑,非常感谢:)
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循环,但我不知道该怎么做:/
试试这个
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 } )();
也许此更改可以帮助您:
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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.