{"id":102,"date":"2025-11-22T10:12:25","date_gmt":"2025-11-22T02:12:25","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=102"},"modified":"2025-11-22T10:12:45","modified_gmt":"2025-11-22T02:12:45","slug":"html5-data-%e8%87%aa%e5%ae%9a%e4%b9%89%e6%95%b0%e6%8d%ae%e5%b1%9e%e6%80%a7%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5-data-%e8%87%aa%e5%ae%9a%e4%b9%89%e6%95%b0%e6%8d%ae%e5%b1%9e%e6%80%a7%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"HTML5 data-*\u81ea\u5b9a\u4e49\u6570\u636e\u5c5e\u6027\u7684\u793a\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd *\u5b8c\u6574\u8be6\u89e3 + \u591a\u573a\u666f\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b\u7684\u300aHTML5 data-<\/em> \u81ea\u5b9a\u4e49\u6570\u636e\u5c5e\u6027\u6559\u7a0b\u300b**\u3002\u5305\u542b\u57fa\u7840\u8bed\u6cd5\u3001\u8bfb\u53d6\/\u5199\u5165\u65b9\u5f0f\u3001JS \u4ea4\u4e92\u3001\u4e8b\u4ef6\u4f20\u53c2\u3001\u52a8\u6001\u4fee\u6539\u3001\u6570\u636e\u7ed1\u5b9a\u548c\u5b9e\u9645\u9879\u76ee\u6848\u4f8b\u3002<\/p>\n\n\n\n

\u5185\u5bb9\u6e05\u6670\u3001\u53ef\u76f4\u63a5\u7528\u4e8e\u5b66\u4e60\u3001\u6559\u5b66\u6216\u6587\u6863\u64b0\u5199\u3002<\/p>\n\n\n\n

\n\n\n\n

\u2b50 HTML5 data- \u81ea\u5b9a\u4e49\u6570\u636e\u5c5e\u6027\u8be6\u89e3<\/em>*<\/h1>\n\n\n\n

data-*<\/code> \u5c5e\u6027\u662f HTML5 \u7528\u4e8e\u5b58\u50a8\u81ea\u5b9a\u4e49\u6570\u636e\u7684\u6807\u51c6\u65b9\u5f0f\uff0c\u5e38\u7528\u4e8e\uff1a<\/p>\n\n\n\n

    \n
  • \u5b58\u50a8\u4e0e DOM \u5143\u7d20\u76f8\u5173\u7684\u53c2\u6570<\/li>\n\n\n\n
  • \u5728 JS \u4e2d\u8bfb\u53d6 \/ \u4fee\u6539\u914d\u7f6e<\/li>\n\n\n\n
  • \u5728\u7ec4\u4ef6\u6216\u63d2\u4ef6\u4e2d\u4f20\u9012\u6570\u636e<\/li>\n\n\n\n
  • \u4e0e\u540e\u7aef\u8fd4\u56de\u7684\u6570\u636e\u7ed1\u5b9a<\/li>\n\n\n\n
  • \u4e8b\u4ef6\u59d4\u6258\u4e2d\u8bc6\u522b\u70b9\u51fb\u5bf9\u8c61<\/li>\n<\/ul>\n\n\n\n

    \u683c\u5f0f\u5982\u4e0b\uff1a<\/p>\n\n\n

    \n&lt;div data-xxx="value">&lt;\/div>\n\n<\/pre><\/div>\n\n\n
    \u5176\u4e2d\uff1a<\/p>\n\n\n\n
      \n
    • xxx<\/code> \u4e3a\u81ea\u5b9a\u4e49\u540d\u79f0\uff08\u5fc5\u987b\u5c0f\u5199\uff0c\u4e0d\u80fd\u5305\u542b\u5927\u5199\u5b57\u6bcd\uff09<\/li>\n\n\n\n
    • value<\/code> \u4e3a\u4efb\u610f\u5b57\u7b26\u4e32\uff08\u6570\u5b57\u3001\u5bf9\u8c61\u5747\u53ef JSON \u5316\uff09<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      \u4e00\u3001\u57fa\u7840\u7528\u6cd5\u793a\u4f8b\uff08\u6700\u5e38\u89c1\uff09<\/h1>\n\n\n
      \n&lt;button id="btn" data-id="101" data-type="delete">\n    \u5220\u9664\u5546\u54c1\n&lt;\/button>\n\n&lt;script>\nconst btn = document.getElementById("btn");\nconsole.log(btn.dataset.id);      \/\/ "101"\nconsole.log(btn.dataset.type);    \/\/ "delete"\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e8c\u3001\u901a\u8fc7 JavaScript \u64cd\u4f5c data-* \u5c5e\u6027<\/h1>\n\n\n\n
      1. \u8bfb\u53d6 data \u5c5e\u6027<\/strong><\/h2>\n\n\n
      \nelement.dataset.name\n\n<\/pre><\/div>\n\n\n
      \u793a\u4f8b\uff1a<\/p>\n\n\n
      \n&lt;div id="user" data-name="\u674e\u82e5\u8431" data-age="20">&lt;\/div>\n\n&lt;script>\nconst user = document.getElementById("user");\nconsole.log(user.dataset.name); \/\/ \u674e\u82e5\u8431\nconsole.log(user.dataset.age);  \/\/ 20\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      2. \u4fee\u6539 data \u5c5e\u6027<\/strong><\/h2>\n\n\n
      \nelement.dataset.age = "22";\nelement.dataset.role = "VIP";\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      3. \u5220\u9664 data \u5c5e\u6027<\/strong><\/h2>\n\n\n
      \ndelete element.dataset.age;\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e09\u3001data-* \u547d\u540d\u89c4\u5219\uff08\u9a7c\u5cf0\u8f6c\u8fde\u5b57\u7b26\uff09<\/h1>\n\n\n\n
      HTML \u4e2d\u7528\u8fde\u5b57\u7b26\uff1a<\/p>\n\n\n
      \n&lt;div data-user-name="Jack">&lt;\/div>\n\n<\/pre><\/div>\n\n\n
      JS \u4e2d\u81ea\u52a8\u8f6c\u6362\u4e3a\u9a7c\u5cf0\uff1a<\/p>\n\n\n
      \nelement.dataset.userName \/\/ Jack\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u56db\u3001\u573a\u666f\u793a\u4f8b 1\uff1a\u4e8b\u4ef6\u59d4\u6258\u4e2d\u8bc6\u522b\u70b9\u51fb\u5bf9\u8c61\uff08\u975e\u5e38\u5e38\u7528\uff09<\/h1>\n\n\n\n
      \u9002\u7528\u4e8e\u5217\u8868\u3001\u5bfc\u822a\u680f\u3001\u5546\u54c1\u5361\u7247\u7b49\u3002<\/p>\n\n\n
      \n&lt;ul id="menu">\n  &lt;li data-page="home">\u9996\u9875&lt;\/li>\n  &lt;li data-page="products">\u5546\u54c1&lt;\/li>\n  &lt;li data-page="contact">\u8054\u7cfb&lt;\/li>\n&lt;\/ul>\n\n&lt;script>\ndocument.getElementById("menu").addEventListener("click", function(e) {\n    if (e.target.dataset.page) {\n        console.log("\u8df3\u8f6c\u5230\uff1a" + e.target.dataset.page);\n    }\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e94\u3001\u573a\u666f\u793a\u4f8b 2\uff1a\u4f5c\u4e3a\u7ec4\u4ef6\u53c2\u6570\uff08\u8f6e\u64ad\u56fe\/\u5f39\u7a97\u5e38\u7528\uff09<\/h1>\n\n\n
      \n&lt;div class="slider" \n     data-autoplay="true"\n     data-delay="3000"\n     data-direction="horizontal">\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
      JS \u521d\u59cb\u5316\uff1a<\/p>\n\n\n
      \nconst slider = document.querySelector(".slider");\n\nconst config = {\n    autoplay: slider.dataset.autoplay === "true",\n    delay: Number(slider.dataset.delay),\n    direction: slider.dataset.direction\n};\n\nconsole.log(config);\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u516d\u3001\u573a\u666f\u793a\u4f8b 3\uff1a\u5b58\u50a8 JSON \u6570\u636e<\/h1>\n\n\n
      \n&lt;div id="product" \n     data-info='{"id":1001,"price":299,"title":"\u8fd0\u52a8\u978b"}'>\n&lt;\/div>\n\n&lt;script>\nconst p = document.getElementById("product");\nconst info = JSON.parse(p.dataset.info);\n\nconsole.log(info.id);      \/\/ 1001\nconsole.log(info.price);   \/\/ 299\nconsole.log(info.title);   \/\/ \u8fd0\u52a8\u978b\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e03\u3001\u573a\u666f\u793a\u4f8b 4\uff1a\u7ed3\u5408 CSS \u4f7f\u7528 data \u5c5e\u6027\uff08\u9ad8\u7ea7\u6280\u5de7\uff09<\/h1>\n\n\n
      \n&lt;style>\nbutton[data-state="danger"] {\n    background: red;\n    color: white;\n}\n&lt;\/style>\n\n&lt;button data-state="danger">\u5220\u9664&lt;\/button>\n\n<\/pre><\/div>\n\n\n
      \u65e0\u9700 JS \u5373\u53ef\u63a7\u5236\u6837\u5f0f\uff0c\u975e\u5e38\u7075\u6d3b\u3002<\/p>\n\n\n\n
      \n\n\n\n
      \u516b\u3001\u573a\u666f\u793a\u4f8b 5\uff1a\u7528\u4e8e\u52a8\u753b\u63a7\u5236<\/h1>\n\n\n
      \n&lt;div class="box" data-speed="2" data-distance="200">&lt;\/div>\n\n&lt;script>\nconst box = document.querySelector(".box");\n\nlet speed = Number(box.dataset.speed);\nlet distance = Number(box.dataset.distance);\n\nconsole.log(speed, distance);\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u4e5d\u3001\u793a\u4f8b\uff1a\u5217\u8868\u52a8\u6001\u70b9\u51fb\u52a0\u8f7d\u6570\u636e<\/h1>\n\n\n
      \n&lt;ul id="list">\n    &lt;li data-id="1" data-name="\u5c0f\u660e">\u5c0f\u660e&lt;\/li>\n    &lt;li data-id="2" data-name="\u5c0f\u7ea2">\u5c0f\u7ea2&lt;\/li>\n    &lt;li data-id="3" data-name="\u5c0f\u674e">\u5c0f\u674e&lt;\/li>\n&lt;\/ul>\n\n&lt;div id="info">&lt;\/div>\n\n&lt;script>\ndocument.getElementById("list").addEventListener("click", e => {\n    if (!e.target.dataset.id) return;\n\n    document.getElementById("info").innerText =\n        `ID: ${e.target.dataset.id}\uff0c\u59d3\u540d: ${e.target.dataset.name}`;\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u5341\u3001\u52a8\u6001\u521b\u5efa\u5e26 data-* \u5c5e\u6027\u7684 DOM<\/h1>\n\n\n
      \nlet li = document.createElement("li");\nli.dataset.index = 5;\nli.dataset.title = "\u793a\u4f8b\u6807\u9898";\n\ndocument.body.appendChild(li);\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u5341\u4e00\u3001data-* \u5c5e\u6027 vs JS \u5168\u5c40\u53d8\u91cf vs DOM \u5c5e\u6027\u5e76\u5b58\u533a\u522b<\/h1>\n\n\n\n
      \u7c7b\u578b<\/th>\u5b58\u50a8\u4f4d\u7f6e<\/th>\u7279\u70b9<\/th><\/tr><\/thead>
      data-*<\/code><\/td>\u5b58\u50a8\u4e8e DOM\uff0c\u6807\u51c6\u65b9\u5f0f<\/td>\u63a8\u8350\u65b9\u5f0f\uff0c\u7ed3\u6784\u5316<\/td><\/tr>
      JS \u5168\u5c40\u53d8\u91cf<\/td>JS \u5185\u5b58<\/td>\u4e0d\u9002\u7528\u4e8e DOM \u6570\u636e<\/td><\/tr>
      DOM \u5c5e\u6027<\/td>element.xxx<\/td>\u4e0d\u5efa\u8bae\u968f\u610f\u6269\u5c55<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      data- \u662f HTML \u5b98\u65b9\u6807\u51c6\u6269\u5c55 DOM \u6570\u636e\u7684\u65b9\u5f0f<\/em>*<\/p>\n\n\n\n
      \n\n\n\n
      \u5341\u4e8c\u3001\u7efc\u5408\u5b8c\u6574\u793a\u4f8b\uff1a\u5546\u54c1\u5361\u7247\u70b9\u51fb\u52a0\u5165\u8d2d\u7269\u8f66<\/h1>\n\n\n
      \n&lt;div class="item" \n     data-id="3001" \n     data-price="199"\n     data-title="\u84dd\u7259\u8033\u673a">\n    &lt;h3>\u84dd\u7259\u8033\u673a&lt;\/h3>\n    &lt;button class="add">\u52a0\u5165\u8d2d\u7269\u8f66&lt;\/button>\n&lt;\/div>\n\n&lt;script>\ndocument.querySelector(".item .add").onclick = function(e) {\n    const item = e.target.parentElement;\n    const id = item.dataset.id;\n    const price = Number(item.dataset.price);\n    const title = item.dataset.title;\n\n    console.log(`\u52a0\u5165\u8d2d\u7269\u8f66\uff1a${title} (ID:${id}) \u00a5${price}`);\n};\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u2714 \u603b\u7ed3\uff08\u80cc\u4e00\u4e0b\u5c31\u884c\uff09<\/h1>\n\n\n\n
        \n
      • data-*<\/code> \u7528\u4e8e\u5b58\u50a8\u81ea\u5b9a\u4e49\u6570\u636e\uff0c\u662f HTML5 \u63a8\u8350\u65b9\u5f0f<\/li>\n\n\n\n
      • JS \u4f7f\u7528 element.dataset.xxx<\/code> \u8bbf\u95ee<\/li>\n\n\n\n
      • HTML \u4e2d\u8fde\u5b57\u7b26 \u2192 JS \u81ea\u52a8\u8f6c\u9a7c\u5cf0<\/li>\n\n\n\n
      • \u914d\u5408\u4e8b\u4ef6\u59d4\u6258\u3001\u7ec4\u4ef6\u914d\u7f6e\u3001\u6837\u5f0f\u63a7\u5236\u975e\u5e38\u5f3a\u5927<\/li>\n\n\n\n
      • \u53ef\u4ee5\u5b58 JSON\u3001\u6570\u5b57\u3001\u5b57\u7b26\u4e32\u7b49<\/li>\n<\/ul>\n\n\n\n
        \u660e\u767d\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4e2a\u5b8c\u6574\u5b9e\u6218\u793a\u4f8b<\/strong>\uff0c\u6f14\u793a\u5982\u4f55\u5728 \u8d2d\u7269\u8f66\u3001Tab \u5207\u6362\u3001\u61d2\u52a0\u8f7d\u573a\u666f\u4e2d\u4f7f\u7528 data-*<\/code> \u5c5e\u6027<\/strong>\uff0c\u5168\u90e8\u90fd\u662f\u53ef\u76f4\u63a5\u8fd0\u884c\u7684 HTML5+JS \u793a\u4f8b\uff0c\u65b9\u4fbf\u4f60\u5b66\u4e60\u548c\u9879\u76ee\u53c2\u8003\u3002<\/p>\n\n\n\n
        \n\n\n\n
        1\ufe0f\u20e3 \u8d2d\u7269\u8f66\u793a\u4f8b\uff08\u52a8\u6001\u52a0\u5165\/\u5220\u9664\u5546\u54c1\uff09<\/h1>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="UTF-8">\n&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n&lt;title>\u8d2d\u7269\u8f66 data-* \u793a\u4f8b&lt;\/title>\n&lt;style>\n  body{font-family:Arial;margin:20px}\n  .item{border:1px solid #ccc;padding:12px;margin-bottom:12px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}\n  .cart{margin-top:20px;border:1px solid #eee;padding:12px;border-radius:6px;background:#fafafa}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;h2>\u5546\u54c1\u5217\u8868&lt;\/h2>\n&lt;div class="item" data-id="101" data-title="\u84dd\u7259\u8033\u673a" data-price="199">\n    &lt;span>\u84dd\u7259\u8033\u673a \u00a5199&lt;\/span>\n    &lt;button class="add">\u52a0\u5165\u8d2d\u7269\u8f66&lt;\/button>\n&lt;\/div>\n&lt;div class="item" data-id="102" data-title="\u65e0\u7ebf\u9f20\u6807" data-price="89">\n    &lt;span>\u65e0\u7ebf\u9f20\u6807 \u00a589&lt;\/span>\n    &lt;button class="add">\u52a0\u5165\u8d2d\u7269\u8f66&lt;\/button>\n&lt;\/div>\n&lt;div class="item" data-id="103" data-title="\u673a\u68b0\u952e\u76d8" data-price="499">\n    &lt;span>\u673a\u68b0\u952e\u76d8 \u00a5499&lt;\/span>\n    &lt;button class="add">\u52a0\u5165\u8d2d\u7269\u8f66&lt;\/button>\n&lt;\/div>\n\n&lt;div class="cart">\n    &lt;h3>\u8d2d\u7269\u8f66&lt;\/h3>\n    &lt;ul id="cartList">&lt;\/ul>\n    &lt;strong id="total">\u603b\u8ba1: \u00a50&lt;\/strong>\n&lt;\/div>\n\n&lt;script>\nconst cartList = document.getElementById('cartList');\nconst totalEl = document.getElementById('total');\nlet total = 0;\n\ndocument.querySelectorAll('.item .add').forEach(btn => {\n    btn.addEventListener('click', e => {\n        const item = e.target.parentElement;\n        const id = item.dataset.id;\n        const title = item.dataset.title;\n        const price = Number(item.dataset.price);\n\n        total += price;\n        const li = document.createElement('li');\n        li.textContent = `${title} \u00a5${price} `;\n        const removeBtn = document.createElement('button');\n        removeBtn.textContent = '\u5220\u9664';\n        removeBtn.addEventListener('click', ()=> {\n            total -= price;\n            li.remove();\n            totalEl.textContent = `\u603b\u8ba1: \u00a5${total}`;\n        });\n        li.appendChild(removeBtn);\n        cartList.appendChild(li);\n        totalEl.textContent = `\u603b\u8ba1: \u00a5${total}`;\n    });\n});\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n\n\n\n
        2\ufe0f\u20e3 Tab \u5207\u6362\u793a\u4f8b\uff08\u901a\u8fc7 data-tab \u8bc6\u522b\u5185\u5bb9\uff09<\/h1>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="UTF-8">\n&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n&lt;title>Tab \u5207\u6362 data-* \u793a\u4f8b&lt;\/title>\n&lt;style>\n  .tabs{display:flex;gap:10px;margin-bottom:10px}\n  .tabs button{padding:8px 12px;border:1px solid #ccc;background:#f5f5f5;border-radius:4px;cursor:pointer}\n  .tabs button.active{background:#1d72ff;color:#fff;border-color:#1d72ff}\n  .tab-content{border:1px solid #eee;padding:12px;border-radius:6px}\n  .tab-content > div{display:none}\n  .tab-content > div.active{display:block}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;div class="tabs">\n    &lt;button data-tab="1" class="active">\u9996\u9875&lt;\/button>\n    &lt;button data-tab="2">\u5546\u54c1&lt;\/button>\n    &lt;button data-tab="3">\u5173\u4e8e&lt;\/button>\n&lt;\/div>\n\n&lt;div class="tab-content">\n    &lt;div data-tab="1" class="active">\u8fd9\u662f\u9996\u9875\u5185\u5bb9&lt;\/div>\n    &lt;div data-tab="2">\u8fd9\u91cc\u662f\u5546\u54c1\u5217\u8868&lt;\/div>\n    &lt;div data-tab="3">\u5173\u4e8e\u6211\u4eec\u4ecb\u7ecd&lt;\/div>\n&lt;\/div>\n\n&lt;script>\nconst tabButtons = document.querySelectorAll('.tabs button');\nconst tabContents = document.querySelectorAll('.tab-content > div');\n\ntabButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n        const tabId = btn.dataset.tab;\n        tabButtons.forEach(b=>b.classList.remove('active'));\n        tabContents.forEach(c=>c.classList.remove('active'));\n\n        btn.classList.add('active');\n        document.querySelector(`.tab-content > div[data-tab="${tabId}"]`).classList.add('active');\n    });\n});\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n\n\n\n
        3\ufe0f\u20e3 \u56fe\u7247\u61d2\u52a0\u8f7d\u793a\u4f8b\uff08\u4f7f\u7528 data-src \u5c5e\u6027\uff09<\/h1>\n\n\n
        \n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n&lt;meta charset="UTF-8">\n&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n&lt;title>\u56fe\u7247\u61d2\u52a0\u8f7d data-* \u793a\u4f8b&lt;\/title>\n&lt;style>\n  img{display:block;margin-bottom:20px;width:100%;max-width:400px;border-radius:6px}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;h2>\u56fe\u7247\u61d2\u52a0\u8f7d\u793a\u4f8b&lt;\/h2>\n&lt;img data-src="https:\/\/picsum.photos\/id\/1015\/600\/400" alt="\u793a\u4f8b1" class="lazy">\n&lt;img data-src="https:\/\/picsum.photos\/id\/1016\/600\/400" alt="\u793a\u4f8b2" class="lazy">\n&lt;img data-src="https:\/\/picsum.photos\/id\/1018\/600\/400" alt="\u793a\u4f8b3" class="lazy">\n\n&lt;script>\nconst lazyImages = document.querySelectorAll('img.lazy');\n\nconst observer = new IntersectionObserver((entries, obs) => {\n    entries.forEach(entry => {\n        if(entry.isIntersecting){\n            const img = entry.target;\n            img.src = img.dataset.src;\n            img.classList.remove('lazy');\n            obs.unobserve(img);\n        }\n    });\n}, {rootMargin: "0px 0px 50px 0px"});\n\nlazyImages.forEach(img => observer.observe(img));\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
        \n","protected":false},"excerpt":{"rendered":"
        \u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd *\u5b8c\u6574\u8be6\u89e3 + \u591a\u573a\u666f\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b\u7684\u300aHTML5 data- \u81ea\u5b9a… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":2,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/102\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}