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

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

javascriptelem.style.width = '100px';

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

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

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

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

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

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

Задание 1

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

Задание 2

ให้ div:

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

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

Задание 3

ให้ div:

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

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