如何使文本区域的字体大小增加2在javascript?

Question

我有一个textarea，我想在每次单击按钮时将其文本字体大小增加2。我写了这个代码，但没有工作。我的HTML代码是

function makebold() {
alert(document.getElementById("input-text").style.fontSize);
var currentfontsize = document.getElementById("input-text").style.fontSize;
console.log(currentfontsize);
var current = parseInt(currentfontsize);
console.log(current);
var updatedfontsize = current + 2;
console.log(updatedfontsize);
var newfont = updatedfontsize;
console.log(newfont);;
document.getElementById("input-text").style.fontSize = newfont;
}

<fieldset>
<legend>Text</legend>
<textarea name="input-text" id="input-text" cols="30" rows="4"></textarea>
</fieldset>
<fieldset>
<legend>Decoration</legend>
<button id="button1" onclick="makebold()">Bigger Decorations!</button><br>
<input type="checkbox" onclick="displayalert()" name="bling" id="bling" value="Bling">Bling
</fieldset>

有人能帮忙吗?

Answer 1

使用以下方法获取字体大小:

var currentfontsize = window.getComputedStyle(document.getElementById("input-text")).fontSize;

和更新你的最后一行

document.getElementById("input-text").style.fontSize = newfont+'px';

您没有在字体中添加px。如果没有px，它将无法工作。

工作小提琴https://jsfiddle.net/3napv795/

Answer 2

function increaseFont(elem, inc) {
const val = window.getComputedStyle(elem).getPropertyValue("font-size"); // gets font-size in string format
const currentSize = parseFloat(val); // removes 'px' 
elem.style.fontSize = currentSize + inc + "px";  // set new size by adding increment to current font size
}

用法:

const button = document.getElementById("button1");
button.addEventListener("click", () => increaseFont(button, 2))

Answer 3

添加一个初始的font-size将解决这个问题:

function makebold(){
alert(document.getElementById("input-text").style.fontSize);
//add initial font-size
document.getElementById("input-text").style.fontSize = '10px';
var currentfontsize = document.getElementById("input-text").style.fontSize;
console.log(currentfontsize);
var current = parseInt(currentfontsize);
console.log(current);
var updatedfontsize = current + 2;
console.log(updatedfontsize);
var newfont = updatedfontsize;
console.log(newfont);;
document.getElementById("input-text").style.fontSize = newfont;
}

Answer 4

在更新到新语法时更正代码....

JS

const textarea = document.getElementById("input-text");

function makebold() {
let fontUnit = "px"; // setting a unit for font size
let increment = 2; // increase the font size by 2 px/rem/em etc ..
// Getting current font size 
let currentfontsize =  window.getComputedStyle(textarea).fontSize;

currentfontsize = parseInt(currentfontsize);

// getting final value 
const updatedfontsize = currentfontsize + increment + fontUnit;

textarea.style.fontSize = updatedfontsize;
}