<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style>
#two {
position: relative;
}
/*data属性作用于css中*/
#two:hover:after {
position: absolute;
left: 300px;
content: attr(data-attribute);
color: red;
}
</style>
</head>
<body>
<div id="one" my-attribute="myValueOne">标签中自定义属性</div>
<div id="two" data-attribute="myValueTwo">data前缀的自定义属性</div>
<div id="three" data-attributeThree="myValueThree">THREE</div>
<div id="four" data-attribute-four="myValueFour">FOUR</div>
<div id="five">FIVE</div>
<div id="six" data-six="myValueSix">SIX</div>
<script>
//取自定义属性的属性值
var valueOne = $("#one").attr("my-attribute");
console.log(valueOne);
//H5的data属性
var valueTwo = $("#two").data("attribute");
console.log(valueTwo);
//即使驼峰命名,也需全部小写取值
var valueThree = $("#three").data("attributethree");
console.log(valueThree);
//多个分隔符分开的,采用驼峰取值
var valueFour = $("#four").data("attributeFour");
console.log(valueFour);
//自定义添加属性 attr("属性名","属性值");
$("#five").attr("data-attribute-five", "myValueFive");
//移除属性
$("#six").removeAttr("data-six");
</script>
</body>
</html>
html自定义属性及相关操作
最新推荐文章于 2024-06-28 16:42:14 发布