<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Get HTML5 Data Attribute with jQuery</title> <style type="text/css"> .button { width: auto; text-decoration: none; border:1px solid #ccc; padding: 10px 20px; color: #fff; } </style> </head> <body> <a href="javascript:void(0);" class="button" data-name="link" data-size="small" data-color="green">button</a> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var element = $('[data-name="link"]'), size = element.data("size"), color = element.data("color"); if ( size == 'large') { element.css('font-size','27px'); } else if ( size == 'small' ) { element.css('font-size','10px'); }; if ( color ) { $(element).css('background-color', color); }; </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Get HTML5 Data Attribute with jQuery 喜欢 (2)or分享 (0)
