Javascript - 如何使用像素调整fontSize的大小

时间:2014-05-08 15:15:19

标签: javascript resize styles

我是编程的新手,我正在搞乱调整字体大小。但是如何用+ 2px和-2px调整大小呢?我现在只能达到12px,但我不知道如何继续添加2个像素。提前谢谢!

function smaller() {
    var alineas = document.getElementsByTagName('p');
    for (bla in alineas) {
        alineas[bla].style.fontSize = '5px';
    }
}

function bigger() {
    var  alineas = document.getElementsByTagName('p');
    for (alinea in alineas) {
        alineas[alinea].style.fontSize = "10px";
    }
}

2 个答案:

答案 0 :(得分:3)

  • 不要使用for..in循环遍历节点列表。改为使用for循环。
  • 您需要从元素中获取当前字体大小,您可以使用window.getComputedStyle()
  • 您可以轻松地将代码缩短为一个功能,并将字体大小缩小到参数。

以下内容如何:

function fontSize(num) {
    var alineas = document.getElementsByTagName('p');
    for (i=0; i<alineas.length; i++) {
        var el = alineas[i]
        var oSize = window.getComputedStyle(el, null).getPropertyValue('font-size');
        var nSize = Number(oSize.replace("px",""))+num;
        el.style.fontSize = nSize+"px"
    }
}

将其称为fontSize(5)fontSize(-5),分别为5像素或5像素。

JSFiddle

答案 1 :(得分:1)

使用parseInt获取当前尺寸,然后根据需要增加它。

var sizeChange = 2; // To increase font size by 2px
var size = parseInt(alineas[alinea].style.fontSize); // "12px" -> 12 
size += sizeChange; // 14