การแนะนำบทความของ wulin.com (www.vevb.com): การใช้แอตทริบิวต์ที่กำหนดเองใน HTML5 นั้นไม่ซับซ้อนทางเทคนิค ความยากลำบากที่แท้จริงคือวิธีการที่คุณเลือกใช้นั้นเหมาะสมกับโครงการของคุณหรือไม่ ถ้ามีวิธีการทำให้มีประสิทธิภาพมากขึ้น? โปรดจำไว้ว่ามันเร็วเกินไปที่จะเปิดใช้งานวิธีชุดข้อมูลเป็นฟังก์ชั่นหน้าเว็บหลังจากทั้งหมดเบราว์เซอร์จำนวนมากไม่รองรับฟังก์ชั่นนี้
การพัฒนา HTML5 นั้นเต็มไปด้วยการแกว่งและการใช้แอตทริบิวต์ที่กำหนดเองใน HTML5 จะค่อยๆได้รับความนิยมในหมู่นักพัฒนา นอกจากนี้ยังมีบทบาทสำคัญในความหมายของการพัฒนาเว็บ ในบทความนี้เราจะสำรวจการสร้างและการเข้าถึงคุณสมบัติข้อมูลที่กำหนดเอง HTML5 รวมถึงฟังก์ชั่น JavaScript ผ่านตัวอย่างที่เป็นประโยชน์
ก่อนที่จะใช้ HTML5 ก่อนอื่นให้เพิ่มแอตทริบิวต์ที่กำหนดเองลงในองค์ประกอบ HTML และเข้าถึงผ่าน JavaScript หากคุณเคยลองมาก่อนคุณจะพบว่ามันง่ายที่จะเพิกเฉยต่อการตรวจสอบแท็กและ HTML5 สามารถให้ฟังก์ชั่นการสร้างและการใช้แอตทริบิวต์องค์ประกอบของคุณเองภายในเว็บเพจที่ถูกต้อง
สร้างไฟล์ HTML5:
หากคุณยังไม่ทราบว่าจะใช้อันไหนคุณสามารถคัดลอกรหัสต่อไปนี้:
<! doctype html>
<html>
<head>
<script>
/*ฟังก์ชั่นที่นี่*/
</script>
</head>
<body>
</body>
</html>
ตั้งค่าองค์ประกอบที่กำหนดเองในร่างกายและเข้าถึงพวกเขาโดยใช้องค์ประกอบ JavaScript ในส่วนของพื้นที่สคริปต์ของหัว
สร้างองค์ประกอบ:
ก่อนอื่นให้เพิ่มเนื้อหาง่าย ๆ และแอตทริบิวต์ที่กำหนดเองรวมถึงองค์ประกอบเช่น IDS เพื่อให้เราสามารถรับรู้ตัวอย่าง JavaScript
<div id = product1 data-product-pategory = เสื้อผ้า>
เสื้อเชิ้ตผ้าฝ้าย
</div>
อย่างที่คุณเห็นแอตทริบิวต์ที่กำหนดเองอยู่ในรูปแบบของ: data-*ตั้งชื่อในส่วนข้อมูลหรือชื่อที่คุณเลือก การใช้คุณสมบัติที่กำหนดเองใน HTML5 เป็นวิธีเดียวที่จะทำเช่นนี้ ดังนั้นหากคุณต้องการตรวจสอบว่าหน้าเว็บนั้นถูกต้องคุณสามารถใช้วิธีนี้ได้
แน่นอนส่วนรายละเอียดโครงการกำหนดว่าคุณสมบัติที่กำหนดเองมีประโยชน์สำหรับคุณและวิธีการตั้งชื่อ ตัวอย่างนี้สามารถนำไปใช้กับเว็บไซต์ค้าปลีกในหมวดหมู่ผลิตภัณฑ์ที่แตกต่างกัน
คุณสมบัติที่กำหนดเองช่วยให้คุณใช้รหัส JavaScript ภายในหน้าด้วยวิธีพิเศษในการตั้งค่าองค์ประกอบเช่นความสามารถในการแสดงภาพเคลื่อนไหว หากไม่มีองค์ประกอบ HTML มาตรฐานเราขอแนะนำให้ใช้คุณสมบัติที่กำหนดเอง
เพิ่มปุ่มทดสอบ
เหตุการณ์สามารถดำเนินการได้โดยใช้องค์ประกอบ JavaScript ของตัวเองในหน้าโดยมีเงื่อนไขว่ารหัสต่อไปนี้จะถูกเพิ่มลงในหน้า:
<ประเภทอินพุต = ปุ่มค่า = รับแอตทริบิวต์ onClick = getElementAttribute ('product1')/>>>>>>
รับคุณลักษณะ:
วิธีที่พบบ่อยที่สุดในการเข้าถึงคุณสมบัติใน JavaScript คือการใช้ GetAttributes ซึ่งเป็นขั้นตอนแรกที่เราต้องทำ เพิ่มฟังก์ชั่นต่อไปนี้ในพื้นที่สคริปต์หัวของหน้า:
ฟังก์ชั่น getElementAttribute (elemid) {
var theelement = document.getElementById (elemid);
var theattribute = theelement.getAttribute ('Data-Product-Category');
การแจ้งเตือน (Theattribute);
-
ที่นี่เราได้เพิ่มค่าการแจ้งเตือนให้กับตัวอย่างและแน่นอนว่าคุณสามารถเพิ่มในสคริปต์ตามความต้องการของคุณเอง
รับข้อมูล:
คุณสามารถใช้ชุดข้อมูลองค์ประกอบแทน DOM getAttributes ซึ่งอาจมีประสิทธิภาพมากขึ้นโดยเฉพาะอย่างยิ่งในบางกรณีที่รหัสวนซ้ำผ่านคุณลักษณะหลายอย่างอย่างไรก็ตามการสนับสนุนของเบราว์เซอร์สำหรับชุดข้อมูลยังคงต่ำมาก
// var theattribute = theelement.getAttribute ('Data-Product-Pategory'); var theattribute = theelement.dataset.productCategory;
ลบข้อมูล- ในชุดข้อมูลที่เริ่มต้นด้วยชื่อแอตทริบิวต์มันยังคงรวมอยู่ใน HTML
โปรดทราบว่าหากคุณมียัติภังค์ในชื่อคุณสมบัติที่กำหนดเองของคุณสิ่งนี้จะใช้รูปแบบอูฐกรณีเมื่อเข้าถึงผ่านข้อมูลเช่น (หมวดหมู่ผลิตภัณฑ์ข้อมูลกลายเป็นหมวดหมู่ผลิตภัณฑ์)
โมดูลและฟังก์ชั่นอื่น ๆ
เราได้รับคุณสมบัตินี้และสคริปต์ยังสามารถตั้งค่าและลบได้ รหัสต่อไปนี้แสดงให้เห็นถึงวิธีการตั้งค่าคุณสมบัติโดยใช้โมดูล JavaScript มาตรฐานและชุดข้อมูล
คุณยังสามารถใช้เมธอด DOM หรือชุดข้อมูลเพื่อลบแอตทริบิวต์บางอย่าง:
// วิธี DOM
TheElement.RemoveAttribute ('Data-Product-Dategory');
// เวอร์ชันชุดข้อมูล
TheElement.dataset.productCategory = null;
บทสรุป:
การใช้คุณสมบัติที่กำหนดเองใน HTML5 นั้นไม่ซับซ้อนทางเทคนิค ความยากลำบากที่แท้จริงคือวิธีการที่คุณเลือกใช้นั้นเหมาะสมกับโครงการของคุณหรือไม่ ถ้าเป็นเช่นนั้นคุณจะทำให้มีประสิทธิภาพมากขึ้นได้อย่างไร? โปรดจำไว้ว่ามันเร็วเกินไปที่จะเปิดใช้งานวิธีชุดข้อมูลเป็นฟังก์ชั่นหน้าเว็บหลังจากทั้งหมดเบราว์เซอร์จำนวนมากไม่รองรับฟังก์ชั่นนี้