คุณสมบัติ borderStyle เป็น shorthand สำหรับกำหนดรูปแบบขอบทั้ง 4 ด้าน พร้อมกัน รับค่า 1-4 ค่า ไวยากรณ์ (Syntax) object.style.borderStyle = value การรับค่า 1-4 ค่า (Clockwise từ Top) จำนวนค่าการกระจาย 1 ค่าทุกด้านเท่ากัน 2 ค่าบน/ล่าง = ค่าแรก, ซ้าย/ขวา = ค่าที่สอง 3 ค่าบน = ค่าแรก, ซ้าย/ขวา = ค่

คุณสมบัติ borderTop เป็น shorthand property สำหรับกำหนดหรือดึงค่าของขอบด้านบนครบทุกอย่าง: border-top-width, border-top-style, border-top-color ไวยากรณ์ (Syntax) object.style.borderTop = width style color|initial|inherit พารามิเตอร์ พารามิเตอร์คำอธิบาย widthความกว้างขอบบน (thin, medium, thick,

คุณสมบัติ borderTopColor ใช้สำหรับกำหนดหรือดึงค่าสีของขอบด้านบนขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderTopColor = color|transparent|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย colorระบุสีขอบบน (ชื่อสี, HEX, RGB, RGBA, HSL, HSLA) ค่าเริ่มต้น = ดำ transparentทำให้ขอบบนโปร่งใส initialตั้ง

คุณสมบัติ borderTopStyle ใช้สำหรับกำหนดหรือดึงค่ารูปแบบของขอบด้านบนขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderTopStyle = value ค่าที่รองรับ ค่าคำอธิบาย noneไม่มีขอบ (ค่าเริ่มต้น) hiddenเหมือน none แต่จองพื้นที่ (โปร่งใส) dottedขอบแบบจุด dashedขอบแบบเส้นขีด solidขอบแบบเส้นทึบ doubleขอบแ

คุณสมบัติ borderTopWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของขอบด้านบนขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderTopWidth = thin|medium|thick|length|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย thinขอบบาง (~1px) mediumขอบกลาง (ค่าเริ่มต้น ~3px) thickขอบหนา (~5px) lengthระบุความกว้างด้วยหน่

HTML (HyperText Markup Language) HTML เป็นภาษาสำหรับ อธิบายโครงสร้างของหน้าเว็บ ประกอบด้วย HTML Elements ที่ประกอบด้วยแท็ก (Tags) และเนื้อหา ภาษา Hypertext - สร้างลิงก์เชื่อมเอกสารได้ เวอร์ชันปัจจุบัน: HTML5 เป็น Static (แสดงข้อมูลคงที่) ยอมรับข้อผิดพลาดเล็กน้อย (Forgiving) แท็กปิดไม่จำเป็นเสมอไป (

HTML5 ภาษาออกแบบเว็บล่าสุดและยอดนิยม ได้เปลี่ยนโลกการออกแบบเว็บอย่างมาก จาก HTML แบบเดิม สิ่งที่ทำให้ HTML5 แตกต่างและดีกว่าคือ ความตอบสนอง (Responsiveness) ความหมายของ Responsive Web Design Responsive Web Design (RWD) คือแนวคิดการพัฒนาเว็บไซต์ให้ปรับเปลี่ยนรูปแบบการจัดวาง (Layout) ตามความละเอียดหน

คุณสมบัติ borderImageSlice ใช้กำหนดว่าภาพขอบจะถูกตัดแบ่งเป็นพื้นที่อย่างไร โดยระบุ offset จากขอบภาพเป็นเปอร์เซ็นต์, ตัวเลข หรือค่าทั่วไป ไวยากรณ์ (Syntax) object.style.borderImageSlice = number|%|fill|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย numberพิกเซลในภาพ raster หรือพิกัดเวกเตอร์ในภาพ vect

คุณสมบัติ borderImageSource ใช้สำหรับกำหนดหรือดึงค่าแหล่งที่มาของภาพที่จะใช้เป็นขอบขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderImageSource = none|url(image-path)|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย noneไม่ใช้ภาพขอบ (ค่าเริ่มต้น) - จะใช้ border-style แทน url(path)เส้นทางของไฟล์ภาพ (

คุณสมบัติ borderImageWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของภาพขอบ (border image) ขององค์ประกอบ ทำงานร่วมกับ border-image-source และ border-image-slice ไวยากรณ์ (Syntax) object.style.borderImageWidth = number|%|auto|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย numberจำนวนเท่าของ border-width (ค

คุณสมบัติ borderLeft เป็น shorthand property สำหรับกำหนดหรือดึงค่าของขอบด้านซ้ายครบทุกอย่างในคำสั่งเดียว ได้แก่ border-left-width, border-left-style, border-left-color ไวยากรณ์ (Syntax) object.style.borderLeft = width style color|initial|inherit พารามิเตอร์ พารามิเตอร์คำอธิบาย widthความกว้างขอ

คุณสมบัติ borderLeftColor ใช้สำหรับกำหนดหรือดึงค่าสีของขอบด้านซ้ายขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderLeftColor = color|transparent|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย colorระบุสีขอบซ้าย (ชื่อสี, HEX, RGB, RGBA, HSL, HSLA) ค่าเริ่มต้นคือสีดำ transparentทำให้ขอบซ้ายโปร่งใส (

คุณสมบัติ borderLeftStyle ใช้สำหรับกำหนดหรือดึงค่ารูปแบบของขอบด้านซ้ายขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderLeftStyle = value ค่าที่รองรับ ค่าคำอธิบาย noneไม่มีขอบ (ค่าเริ่มต้น) hiddenเหมือน none แต่ยังจองพื้นที่ขอบ (โปร่งใส) dottedขอบแบบจุดไข่ dashedขอบแบบเส้นขีด solidขอบแบบเส้นท

คุณสมบัติ borderLeftWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของขอบด้านซ้ายขององค์ประกอบ ไวยากรณ์ (Syntax) object.style.borderLeftWidth = thin|medium|thick|length|initial|inherit ค่าที่รองรับ ค่าคำอธิบาย thinขอบบาง (โดยปกติ ~1px) mediumขอบกลาง (ค่าเริ่มต้น ~3px) thickขอบหนา (โดยปกติ ~5px) length

คุณสมบัติ borderRadius ใน HTML DOM Style ใช้สำหรับกำหนดหรือดึงค่าความโค้งของมุมทั้ง 4 มุมขององค์ประกอบ สามารถควบคุมมุมแต่ละมุมได้แยกกันผ่าน borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius ไวยากรณ์ (Syntax) การกำหนดค่า (Setting) object.style.borderRadius =

คุณสมบัติ pageYOffset ของออบเจกต์ Window คืนค่าจำนวนพิกเซลที่เอกสารถูกเลื่อน (scroll) แนวตั้งจากมุมซ้ายบนของหน้าจอ ไวยากรณ์ (Syntax) window.pageYOffset คืนค่า: number - จำนวนพิกเซลที่เลื่อนลงมาจากด้านบน (Read-only) ตัวอย่างการใช้งาน ตัวอย่างนี้แสดงค่า pageYOffset เมื่อคลิกปุ่ม และทดสอบการเลื่อนหน้

เมธอด moveBy() ของออบเจกต์ Window ใช้สำหรับย้ายหน้าต่างไปยังตำแหน่งใหม่โดยอิงจากตำแหน่งปัจจุบัน (Relative Position) ไม่ใช่พิกัดสัมบูรณ์ ไวยากรณ์ (Syntax) window.moveBy(x, y) พารามิเตอร์: x - จำนวนพิกเซลที่จะย้ายแนวนอน (ค่าบวก = ขวา, ค่าลบ = ซ้าย) y - จำนวนพิกเซลที่จะย้ายแนวตั้ง (ค่าบวก = ล่าง, ค่า

เมธอด moveTo() ของออบเจกต์ Window ใน HTML ใช้สำหรับย้ายขอบซ้ายและขอบบนของหน้าต่างไปยังพิกัดที่ระบุอย่างชัดเจน ไวยากรณ์ (Syntax) window.moveTo(x, y) พารามิเตอร์: x - จำนวนพิกเซลในการย้ายแนวนอน (แนวแกน X) y - จำนวนพิกเซลในการย้ายแนวตั้ง (แนวแกน Y) ตัวอย่างการใช้งาน ตัวอย่างต่อไปนี้สาธิตการเปิดหน้า

เมธอด resizeBy() ของ Window ใน HTML ใช้สำหรับปรับขนาดหน้าต่างสัมพัทธ์กับขนาดปัจจุบัน (relative size) โดยระบุจำนวนพิกเซลที่ต้องการเพิ่มหรือลด รูปแบบการใช้งาน (Syntax) window.resizeBy(w, h) โดยที่ w และ h คือจำนวนพิกเซลที่ต้องการปรับเปลี่ยนความกว้างและความสูงตามลำดับ (ค่าบวก = ขยาย, ค่าลบ = ย่อ) ตั

เมธอด resizeTo() ของ Window ใน HTML ใช้สำหรับปรับขนาดหน้าต่างให้เป็นขนาดที่กำหนดโดยตรง (absolute size) โดยระบุความกว้างและความสูงในหน่วยพิกเซล รูปแบบการใช้งาน (Syntax) window.resizeTo(w, h) โดยที่ w และ h คือค่าความกว้างและความสูงของหน้าต่างในหน่วยพิกเซลตามลำดับ ตัวอย่างการใช้งาน <!DOCTYPE htm