HTML5实现自定义属性.doc
3页
HTML5 实现自定义属性HTML5开发正在如火如荼的进行中，在HTML5中使用自定义属性正逐渐受到开发者们的 青睐；此外，它还在 Web 开发语义中发挥了重要作用本文我们将探讨通过实践案例来创 建和访问HTML5自定义数据属性，包括JavaScript函数再使用HTML5前，首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如 果你之前有尝试过，你会发现，容易忽略标记验证，而HTML5可以为你提供在有效的网页 内创建并使用自己的元素属性的功能创建 HTML5 文件：如果你还没想好要使用哪一个，可以复制下面的代码：< !DOCTYPE html>< html>< head>< script>/*functions here*/< /script>< /head>< body>< /body>< /html>在 body 中设置自定义元素，在 head 部分脚本区域利用 JavaScript 元素进行访问创建元素：首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们能够识别JavaScript示 例
在HTML5中使用自定义属性，这是唯一有效的方法因此，如果你想验证网页 是否有效可才采用这种方法当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名这个示例可适 用于不同产品类别的零售网站自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画 显示功能如果没有标准的HTML元素，我们建议使用自定义属性添加测试按钮 在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中:获取属性：在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是我们要做的第一步在页面的 head 脚本区域添加以下函数：function getElementAttribute(elemID) {var theElement = document.getElementById(elemID);var theAttribute = theElement.getAttribute('data-product-category');alert(theAttribute);}这里，我们为示例增加了 alert值，当然你也可以根据自身需求在脚本中添加。
获取数据：你可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下, 代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点 此代码与//后面的方法一样可执行相同的进程//var theAttribute = theElement.getAttribute('data-product-category'); var theAttribute = theElement.dataset.productCategory;从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case 形式，即(“ data-product-category” 变成“ productCategory” )其他模块、函数 我们已经获取该属性，脚本仍然可以设置和删除下面的代码演示了如何使用标准的 JavaScript 模块和数据集来设置属性你也可以使用 DOM 方法或者数据集来删除某个属性：//DOM methodtheElement.removeAttribute('data-product-category');//dataset versiontheElement.dataset.productCategory = null;结束语： 在 HTML5 中实现自定义属性技术上并不是很复杂，真正困难的是选择使用的方法是否适用 于你的项目；如果适用，该如何使其更有效？请记住，现在启用数据集方法作为页面功能还 为时尚早，毕竟很多浏览器暂不支持此功能。
