页面中的自定义属性的几种方法

<div id="product1" data-product-category="clothing"></div>
<input type="button" value="get attribute" onclick="getElementAttribute('product1')" />


<script type="text/javascript">
function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
var theAttribute = theElement.getAttribute('data-product-category');
alert(theAttribute);
}

</script>

<div class="pbox" id="product1">
4444
</div>


 <script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
      function objName(elem){
      var elem=document.getElementById(elem);
      var setAttr=elem.setAttribute("data-name","box");
      var getAttr=elem.getAttribute("data-name");
      alert(getAttr);
      }
     objName("product1");
      $("#product1").prop("dataName","box");
      alert($("#product1").prop("dataName"));
      $("#product1").data("dataList","first");
      alert($("#product1").data("dataList"));
      $("#product1").data("test",{
      first:13,
      last:"pizza"
      });
      $("#product1").removeData("test").last; //把整个添加的data属性都去除掉了
      alert($("#product1").data("test"));
</script>