JavaScript เพิ่มขนาดตัวอักษร ด้วยคำสั่ง style.fontSize

สอนเขียน JavaScript เพิ่มขนาดตัวอักษร ด้วยคำสั่ง style.fontSize บทความนี้แนะนำการเพิ่มขนาดตัวอักษรแบบให้ผู้ใช้งานกดปุ่มเพื่อเพิ่มขนาดตัวอักษร โดยทุกครั้งที่กดปุ่มขนาดของตัวอักษรจะใหญ่ขึ้นเรื่อยๆ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript เพิ่มขนาดตัวอักษร ด้วยคำสั่ง style.fontSize

<div id="content">Hello, Devdit</div>
<input type="button" value="เพิ่มขนาดตัวอักษร" onclick="plus()">

<script>
    function plus() {
        let content = document.getElementById("content");
        var font_size = parseFloat( window.getComputedStyle(content, null).getPropertyValue('font-size') ); 
        content.style.fontSize = font_size + 1;
    }
</script>

1. ผู้ใช้งานกดปุ่ม “เพิ่มขนาดตัวอักษร” จะเรียกใช้ฟังก์ชัน plus โดยภายในฟังก์ชันจะอ้างถึง id = content เก็บไว้ที่ตัวแปร content 

2. ดึงค่าขนาดตัวอักษรด้วย getPropertyValue('font-size') จากตัวแปร content และแปลงค่าดังกล่าวให้เป็นเลขทศนิยมด้วยคำสั่ง parseFloat เก็บไว้ที่ตัวแปร font_size

3. ใช้คำสั่ง content.style.fontSize = font_size + 1 หมายความว่า กำหนดขนาดตัวอักษรให้กับตัวแปร conent เท่ากับ ตัวแปร font_size + 1 ซึ่งจะทำให้ทุกครั้งที่กดปุ่มขนาดตัวอักษรจะใหญ่ขึ้น 1px