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

สอนเขียน JavaScript ลดขนาดตัวอักษร ด้วยคำสั่ง style.fontSize บทความนี้แนะนำการดึงขนาดตัวอักษรจาก div ด้วยคำสั่ง getPropertyValue และนำไปลดขนาดตัวอักษรด้วย style.fontSize สามารถเขียนโปรแกรมได้ดังนี้

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

<div id="content" style="font-size: 30px">Hello, Devdit</div>
<input type="button" value="ลดขนาดตัวอักษร" onclick="decrease()">

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

1. เมื่อผู้ใช้งานกดปุ่ม จะเรียกใช้ฟังก์ชัน decrease ในภาษา JavaScript

2. ตัวแปร content อ้างถึง id = content ใน HTML

3. ตัวแปร font_size เท่ากับขนาดของตัวอักษรในตัวแปร content หรือ id = content ผ่าน getPropertyValue('font-size')

4. ลดขนาดตัวอักษรลงของตัวแปร content ที่ละ 1px ด้วย content.style.fontSize = font_size - 1