หน่วยวัดในแอตทริบิวต์ style ใน JavaScript

เมื่อระบุค่าคุณสมบัติ ผ่านแอตทริบิวต์ style เราต้อง ระบุหน่วยวัด:

elem.style.width = '100px';

เมื่ออ่านค่า ค่าที่ได้ก็จะ มาพร้อมกับหน่วยวัด:

let width = elem.style.width;
console.log(width); // จะแสดง '100px';

หากจำเป็น เราสามารถกำจัด หน่วยวัดออกได้โดยใช้ parseInt:

let width = elem.style.width;
console.log(parseInt(width)); // จะแสดง 100

หากคาดว่าจะเป็นค่าทศนิยม สามารถใช้ฟังก์ชัน parseFloat:

let width = elem.style.width;
console.log(parseFloat(width));

ให้ div และปุ่ม เมื่อคลิกที่ปุ่ม กำหนดความกว้างให้ div เป็น 400px และความสูงเป็น 300px

ให้ div:

<div id="elem" style="width: 300px; height: 200px;">
	text
</div>

ให้ปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้แสดงความกว้างและความสูงของ div โดยไม่มี หน่วยวัด

ให้ div:

<div id="elem" style="font-size: 1.5em;">
	text
</div>

ให้ปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้แสดงขนาดฟอนต์ของ div โดยไม่มีหน่วย วัด