HTML5开发正在如火如荼的进行中，在HTML5中使用自定义属性正逐渐受到开发者们的青睐；此外，它还在Web开发语义中发挥了重要作用。本文我们将探讨通过实践案例来创建和访问HTML5自定义数据属性，包括JavaScript函数。
再使用HTML5前，首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果你之前有尝试过，你会发现，容易忽略标记验证，而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。
创建HTML5文件：
如果你还没想好要使用哪一个，可以复制下面的代码：
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p><!DOCTYPE html> </p></li><li><p><html> </p></li><li><p><head> </p></li><li><p><script> </p></li><li><p>/*functions here*/ </p></li><li><p></script> </p></li><li><p></head> </p></li><li><p><body> </p></li><li><p></body> </p></li><li><p></html> </p></li></ol>
|
在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。
创建元素：
首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们能够识别JavaScript示例。
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p><div id="product1" data-product-category="clothing"> </p></li><li><p>Cotton Shirt </p></li><li><p></div> </p></li></ol>
|
正如你所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果你想验证网页是否有效可才采用这种方法。
当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。
自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。
添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p><input type="button" value="get attribute" onclick="getElementAttribute('product1')"/> </p></li></ol>
|
获取属性：
在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是我们要做的第一步。在页面的head脚本区域添加以下函数：
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>function getElementAttribute(elemID) { </p></li><li><p>var theElement = document.getElementById(elemID); </p></li><li><p>var theAttribute = theElement.getAttribute('data-product-category'); </p></li><li><p>alert(theAttribute); </p></li><li><p>} </p></li></ol>
|
这里，我们为示例增加了alert 值，当然你也可以根据自身需求在脚本中添加。
获取数据：
你可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。
双击代码全选
|
1
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>//var theAttribute = theElement.getAttribute('data-product-category'); </p></li><li><p>var theAttribute = theElement.dataset.productCategory; </p></li></ol>
|
从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。
请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。
其他模块、函数
我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<ol class="dp-xml" style="border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid;list-style-position:initial;list-style-image:initial;background-image:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#5c5c5c;border-left-width:3px;border-left-color:#146b00;font-size:14px;padding:5px 0px;margin:0px 0px 1em 20px;"><li><p>//DOM method </p>
<div style=" display:block; width:100%; padding-top:15px; margin:0px auto; height:90px; overflow:hidden; text-align:center;"><script src="/2011/ads/tech_content_end_468x60.js"></script><script type="text/javascript"><!--
google_ad_client = "pub-5977682010997732";
/* 468x60, 09-9-9 */
google_ad_slot = "4048873275";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><ins id="aswift_1_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&&s.log.push(i)}" vspace="0" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;" frameborder="0" height="60" scrolling="no" width="468"></iframe></ins></ins>
</div>
</li></ol>
|
发表回复