เมื่อคุณดู HTML คุณมักจะเห็นการใช้ data-role, data-theme ฯลฯ ตัวอย่างเช่น เอฟเฟกต์ส่วนหัวสามารถทำได้โดยใช้โค้ดต่อไปนี้:
<div data-role=header> <h1>ฉันคือตำแหน่ง</h1> </div>
เหตุใดการเขียน data-role=header จึงสามารถบรรลุผลของข้อความด้านล่างสีดำและตรงกลางได้
บทความนี้นำเสนอวิธีการนำไปใช้ที่ง่ายที่สุดเพื่อให้ทุกคนเข้าใจการใช้งานเหล่านี้โดยสัญชาตญาณ
เราเขียนหน้า HTML และปรับแต่งแอตทริบิวต์ data-chb=header เราหวังว่าสีพื้นหลังของพื้นที่ div ที่มีแอตทริบิวต์นี้จะเป็นสีดำ ข้อความจะเป็นสีขาว และจะปรากฏตรงกลาง div ไม่มีแอตทริบิวต์ที่กำหนดเอง data-chb จะแสดงในลักษณะเริ่มต้น รหัส html จะเป็นดังนี้:
<body> <div data-chb=header> <h1>ฉันใช้แอตทริบิวต์ที่กำหนดเองของ data-chb สำหรับ div</h1> </div> <br/> <div> ฉันไม่ได้ใช้แอตทริบิวต์ที่กำหนดเองของ data-chb . แสดงตามที่คุณต้องการ; </div> </body>
เพื่อให้ได้เอฟเฟกต์การแสดงผลโดยที่สีพื้นหลังเป็นสีดำ ข้อความเป็นสีขาว และจอแสดงผลอยู่ตรงกลาง เรากำหนด CSS ต่อไปนี้:
<style> .ui_header { สีพื้นหลัง: สีดำ; การจัดตำแหน่งข้อความ: center; color:white; border:1px solid #000;จากนั้นเราใช้วิธี js ต่อไปนี้เพื่อเพิ่มคำจำกัดความ css แบบไดนามิกและเปลี่ยนรูปแบบการแสดงผลของ div ด้วยแอตทริบิวต์ data-chb เมื่อโหลดเพจ:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; //สำรวจ DIV ทั้งหมด การควบคุมสำหรับ (var i=0;i<length;i++){ var elem = elems[i]; //รับแอตทริบิวต์ที่กำหนดเองของการควบคุม var customAttr = elem.dataset.chb; //คุณยังสามารถรับแอตทริบิวต์ที่กำหนดเองได้ด้วยวิธีต่อไปนี้ //var customAttr = elem.dataset[chb]; //หากเป็นค่าส่วนหัวที่เรากำหนดไว้ล่วงหน้า หมายความว่าจะต้องเป็น ประมวลผล if(customAttr==header ){ //เพิ่มสไตล์ elem.setAttribute(class,ui_header); } } } } </script>แน่นอนว่า นอกเหนือจากฟังก์ชันข้างต้นแล้ว คุณลักษณะนี้ยังมีฟังก์ชันอื่นๆ ด้วย เช่น การสร้างข้อมูลผ่าน JS การกรอกข้อมูล เป็นต้น
สรุปข้างต้นคือแอตทริบิวต์ HTML5: 'data-' ที่โปรแกรมแก้ไขแนะนำคุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!