html5 自定义标签注解

最新推荐文章于 2022-11-16 22:59:50 发布

sking_2008

最新推荐文章于 2022-11-16 22:59:50 发布

阅读量1k

点赞数 1

分类专栏： html5 文章标签： html5 button function 浏览器

本文链接：https://blog.csdn.net/sking_2008/article/details/7487615

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script>
/*html5 自定义标签的使用 html5自定义标签只允许以 data- 为开头定义*/
/*functions here*/
function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
// 赋值开始
/*js方式给自定义元素赋值*/
theElement.setAttribute('data-product-category','sale');
//数据集方式给自定义元素赋值
//theElement.dataset.productCategory = "sale";
//赋值结束
//取值开始
var theAttribute = theElement.getAttribute('data-product-category');
alert(theAttribute);
//数据集的取值方式为驼峰式如 data-produce-lxx 取值的元素就转换为 productLxx
var theAttribute1 = theElement.dataset.productLxx;
alert(theAttribute1);
var theAttribute2 = theElement.dataset.product;
alert(theAttribute2);
var theAttribute3 = theElement.dataset.productLxxLxx;
alert(theAttribute3);
//取值结束
//删除元素开始
theElement.removeAttribute('data-product-category');
//theElement.dataset.productCategory = null;
var theAttribute = theElement.getAttribute('data-product-category');
alert(theAttribute);
//删除元素结束

//最后目前对数据集操作自定义标签方式各个浏览器支持情况不一所以考虑兼容性建议还是使用 dom方式

}
</script>
</head>
<body>
<div id="product1" data-product-category="clothing" data-product-lxx="hello" data-product="lxx" data-product-lxx-lxx="h,h">
药，药，彻可闹 ~~
</div>
<input type="button" value="get attribute" οnclick="getElementAttribute('product1')"/>

</body>
</html>