我正在尝试通过点击按钮来增加字体大小。我已经得到了第一个工作,但我不能让我的头周围的第二个。第二个,每次点击都会增加1px的字体(我几乎卡住了):
<input type="button" value="Increase Font Size 100px" onclick="increaseFontSizeBy100px()">
<p id="a">Font Size</p>
<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>
<script>
function increaseFontSizeBy100px() {
document.getElementById('a').style.fontSize = "100px";
}
function increaseFontSizeBy1px() {
var font = document.getElementById('b').style.fontSize;
font++;
}
</script>
7条答案
按热度按时间11dmarpk1#
按照下面的代码将你的函数改为,看看会发生什么:
注:如您所见,这两个功能有很多重复。因此,如果我是你,我会改变这个函数,将fontsize增加一个给定的值(在本例中,是一个int)。
那么,我们能做些什么呢?我认为我们应该把这些功能变成一个更通用的功能。
看看下面的代码:
现在,例如,在按钮**“Increase Font Size 1 px”**中,您应该输入以下内容:
但是,如果我们想要一个**“减少字体大小1 px”**,我们可以做什么?我们使用-1而不是1来调用函数。
我们还解决了减小字体大小问题。但是,我会将函数名更改为更通用的名称,并在我创建的两个函数中调用它:increaseFontSize(id,increaseFactor)和decreaseFontSize(id,decreaseFactor)。
就这样
zaqlnxep2#
试试这个:
brqmpdu13#
通过单击元素循环切换不同的字体大小
7cjasjjr4#
wvt8vs2t5#
简单查询
字体大小
qvtsj1bj6#
mzmfm0qo7#
学分:我指的是2016年7月28日5时58分由艾比·亚罗回答。我用来练习的。这就是改进。
将
id
设置在您想要的位置。如果您想实现整个页面的大小更改,您可以将id
设置为body
id=“TextLetterSizeChangeID”。或者,如果你想要一些其他的元素,那么将它设置为该元素,比如<p>
或<span>
。删除toString()
。我设置了函数中的变量。我也给变量、函数和id起了名字,我觉得它们更有关联性。