如何巧妙运用HTML data属性实现长尾关键词优化？

说实话， HTML data属性是个好东西，你懂的，就是可以在元素上随便加个自定义属性，后面让JS去读，YYDS，说句实话…！

换句话说... 比如你有个按钮， 可以这样写：赞然后JS就可以去读取这个data-liked属性。

一、 那些你可能不知道的事儿

害，咱就是说这个data属性其实很简单，但还是有些坑的，拉倒吧...。

常见坑

先说说 属性名里别带大写字母，写成 data-MyInfo 会直接失效， 也许.… 不对不对，应该是浏览器会忽略它。

还有， 别把对象直接塞进去，只能是字符串，要想存对象得 JSON.stringify 一下。

说明….. 有时候你会忘记驼峰转化， data-user-id 用 js 拿到的是 dataset.userId，不是 user-id，你懂的。

在JS里怎么读写

下面给你们演示几段超简陋代码：

// 获取元素
var btn = document.querySelector;
// 读取
var liked = btn.dataset.liked; // "false"
// 设置
btn.dataset.liked = 'true';
btn.textContent = '已赞';

这玩意儿不影响页面渲染， 只是让你以后能用 element.dataset.xxx 去取值，总的来说挺方便的，摸个底。。