data-idÔõÑùÔÚjsÖлñµÃ
ÔÚ javascript ÖУ¬»ñÈ¡ÔªËØµÄ data-id ÊôÐÔµÄÒªÁìÓÐÁ½ÖÖ£ºÊ¹Óà getattribute() ÒªÁìʹÓà dataset ÊôÐÔ
ÔÚ JavaScript ÖлñÈ¡ data-id
ÔÚ JavaScript ÖУ¬¿ÉÒÔͨ¹ýÒÔÏ·½·¨»ñÈ¡ÔªËØµÄ data-id ÊôÐÔ£º
1. ʹÓà getAttribute() ÒªÁì
const element = document.getElementById('my-element'); const dataId = element.getAttribute('data-id');
µÇ¼ºó¸´ÖÆ
2. ʹÓà dataset ÊôÐÔ
dataset ÊôÐÔÊÇÒ»¸öÖ»¶Á DOMStringMap ¹¤¾ß£¬°üÀ¨ÔªËØËùÓÐ×Ô½ç˵Êý¾ÝÊôÐÔ¡£Ëü¿ÉÒÔͨ¹ýÒÔÏ·½·¨»á¼û£º
const element = document.getElementById('my-element'); const dataId = element.dataset.id;
µÇ¼ºó¸´ÖÆ
ʾÀý£º
const element = document.querySelector('div[data-id="my-div"]'); // ʹÓà getAttribute() ÒªÁì const dataId1 = element.getAttribute('data-id'); // ʹÓà dataset ÊôÐÔ const dataId2 = element.dataset.id; console.log(dataId1); // "my-div" console.log(dataId2); // "my-div"
µÇ¼ºó¸´ÖÆ
×¢ÖØ£º
data-id ÊôÐÔÊÇ×Ô½ç˵ÊôÐÔ£¬ÕâÒâζ×ÅËü²»ÊÇ HTML ¹æ·¶µÄÒ»²¿·Ö¡£
¹ØÓÚ´øÓÐÁ¬×Ö·ûµÄ data ÊôÐÔ£¬ÀýÈç data-my-id£¬¿ÉÒÔʹÓÃÖл®Ïß´óд·¨À´»á¼ûËüÃÇ£¬ÀýÈç dataset.myId¡£
ÈôÊÇÔªËØûÓÐ data-id ÊôÐÔ£¬getAttribute() ÒªÁ콫·µ»Ø null£¬¶ø dataset ÊôÐÔ½«·µ»Ø undefined¡£
ÒÔÉϾÍÊÇdata-idÔõÑùÔÚjsÖлñµÃµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡