Event onpaste ทริกเกอร์เมื่อ User Paste เนื้อหา ลงใน Element (Input, Textarea, ContentEditable) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <input type=text onpaste=pasteFunction() value=paste text here> <script> function pasteFunction() { docume

ใช้ Number() แปลง Empty Array [] เป็น Number จะได้ 0 ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert [] to Number</p> <script> var myVal = []; document.write(Number: + Number(myVal)); // ผลลัพธ์: 0 </script> </body>

ใช้ Number() แปลง Infinity เป็น Number จะได้ Infinity (ค่าเดิม) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert Infinity to Number</p> <script> var myVal = Infinity; document.write(Number : + Number(myVal)); // ผลลัพธ์: Infinity &

ใช้ Boolean() แปลง NaN เป็น Boolean จะได้ false ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert NaN to Boolean</p> <script> var myNaN = NaN; document.write(Boolean : + Boolean(myNaN)); // ผลลัพธ์: false </script> </body

ใช้ Property borderImageOutset เพื่อขยายพื้นที่ Border Image ออกนอก Border Box ของ Element (ไม่ส่งผล Layout) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { background-color: gray; border: 40px solid; border-image: url(https://www

Event onreset ทริกเกอร์เมื่อ Form ถูก Reset (กด <input type=reset> หรือเรียก form.reset()) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <script> function resetFunct() { alert(The form was reset); } </script> <form onreset=resetF

Event onsearch ทริกเกอร์เมื่อ User กด Enter หรือกดปุ่ม Clear (✕) ใน <input type=search> ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write what you want to search below and press ENTER.</p> <input type=search id=newInput onsearch=searchFunc()>

Event ondrag ทริกเกอร์ ซ้ำๆ ตลอดการ Drag (High Frequency) ระหว่างที่ User จับ Element อยู่และเคลื่อนย้าย ตัวอย่างโค้ด <!DOCTYPE HTML> <html> <head> <style> .drag { float: left; width: 100px; height: 35px; border: 2px dashed #876587; margin: 15px; padding: 10px; }

ใช้ Number() แปลง null เป็น Number จะได้ 0 ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Convert null to Number</p> <script> var myVal = null; document.write(Number: + Number(myVal)); // ผลลัพธ์: 0 </script> </body> </h

Event ondragstart ทริกเกอร์เมื่อ เริ่มการ Drag Element (จับเมาส์/สัมผัสแล้วเคลื่อนย้าย) — จุดสำคัญที่สุดคือ ตั้งค่า DataTransfer ตัวอย่างโค้ด <!DOCTYPE HTML> <html> <head> <style> .drag { float: left; width: 100px; height: 35px; border: 2px dashed #876587; margin

ใช้ Property boxShadow เพื่อเพิ่ม Drop Shadow ให้ Element รองรับหลาย Shadow (Comma-separated) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #box { border: thick solid green; width: 300px; height: 200px; } </style> &l

Event ondragend ทริกเกอร์เมื่อ การ Drag จบสิ้นสุด (ปล่อยเมาส์/ปล่อยนิ้ว) ไม่ว่าจะ Drop สำเร็จหรือยกเลิก ตัวอย่างโค้ด: Drag and Drop 完整流程 <!DOCTYPE HTML> <html> <head> <style> .drag { float: left; width: 100px; height: 35px; border: 2px dashed #876

ใช้ Property captionSide (ไม่ใช่ borderWidth ตามต้นฉบับ) เพื่อตั้งค่าตำแหน่ง Caption ของ Table ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <table id=newTable border=2> <caption id=newCaption>Employee Details</caption> <tr><th>EmpID<

Property style.clear ควบคุมพฤติกรรมของ Element เทียบกับ Floating Elements (float: left/right) ไม่ได้ ดึงตำแหน่ง แต่ กำหนดกฎการวาง ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> img { float: left; } </style> </head> <body> <img

สามารถเปลี่ยนค่า Attribute ของ Element ได้โดยตรงผ่าน Property หรือใช้ setAttribute() ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <img id=HTML5 src=https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg width=200 height=150> <script> // วิธี 1: P

Event onblur ทริกเกอร์เมื่อ Element สูญเสีย Focus — ไม่ Bubble (ต่างจาก focusout) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write below:</p> <input type=text onblur=newFunc(this)> <script> function newFunc(a) { a.style.backgr

Event onfocus ทริกเกอร์เมื่อ Element ได้รับ Focus — ไม่ Bubble (ต่างจาก focusin) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write below:</p> <input type=text onfocus=newFunc(this)> <script> function newFunc(x) { x.style.backgr

Event onfocusin ทริกเกอร์เมื่อ Element ได้รับ Focus — Bubbles (ต่างจาก onfocus ที่ไม่ Bubble) ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Write below:</p> <input type=text onfocusin=newFunc(this)> <script> function newFunc(x) {

Property nodeName คืนค่า ชื่อของ Node เป็น String ตัวพิมพ์ใหญ่สำหรับ HTML Elements ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <h1 id=id1>Tutorials</h1> <p id=id2>Demo Content</p> <p id=id3></p> <p id=id4></p> &l

Property nodeValue ใช้ อ่าน/ตั้งค่า ค่าของ Node ใช้กับ Node Types ที่มีค่า: Text, Comment, CDATASection, Attr (Deprecated) — ไม่ทำงานกับ Element Node ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <p>Get the node value</p> <button>Demo Button Text</butto