JavaScript ดึงขนาดตัวอักษรใน div ด้วย getPropertyValue

สอนเขียน JavaScript ดึงขนาดตัวอักษรใน div ด้วยคำสั่ง getPropertyValue บทความนี้แนะนำการใช้คำสั่งดังกล่าวเพื่อดึงขนาดตัวอักษร หรือ font-size จาก div หรือ elements ภายในเว็บไซต์ พร้อมแสดงผลลัพธ์ผ่านคำสั่ง console.log สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ดึงขนาดตัวอักษรใน div ด้วย getPropertyValue

<div id="c" style="font-size: 30px">Hello, Devdit</div>

<script>
    let c = document.getElementById("c");
    var fz = parseFloat( window.getComputedStyle(c, null).getPropertyValue('font-size') ); 
    console.log( "ขนาดของตัวอักษรเท่ากับ "+fz+"px" );
</script>

ผลลัพธ์

ขนาดของตัวอักษรเท่ากับ 30px

JavaScript ดึงขนาดตัวอักษรใน div จากตัวอย่าง div id = c มีการกำหนดขนาดตัวอักษรไว้ที่ 30px จากนั้นภายใน JavaScript มีการอ้างถึง id = c เก็บไว้ที่ตัวแปร c และสร้างตัวแปร fz เก็บตัวเลขของขนาดตัวอักษรภายใน div id = c ด้วยคำสั่ง window.getComputedStyle และ getPropertyValue('font-size') พร้อมกับแปลงให้เป็นตัวเลขทศนิยมด้วยคำสั่ง parseFloat เก็บค่าไว้ที่ตัวแปร fz พร้อมกับแสดงผลลัพธ์ด้วยคำสั่ง console.log