HTML5实例教程:HTML5实现自定义属性

网页制作Webjx文章简介：在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示例。

<div id="product1" data-product-category="clothing">
Cotton Shirt 
 
</div>

正如你所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果你想验证网页是否有效可才采用这种方法。

当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。

自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：

<input type="button" value="get attribute" onclick="getElementAttribute('product1')"/>

获取属性：

在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 method 
 
theElement.removeAttribute('data-product-category');
//dataset version 
 
theElement.dataset.productCategory = null;

结束语：

在HTML5中实现自定义属性技术上并不是很复杂，真正困难的是选择使用的方法是否适用于你的项目；如果适用，该如何使其更有效？请记住，现在启用数据集方法作为页面功能还为时尚早，毕竟很多浏览器暂不支持此功能。

原文地址：http://www.webjx.com/html-xhtml/webxhtml-32296.html