HTML5学习第7篇—自定义属性data-*

最新推荐文章于 2024-07-05 18:12:41 发布

水晶果冻1125

最新推荐文章于 2024-07-05 18:12:41 发布

阅读量238

点赞数 1

分类专栏： # HTML5 文章标签： html5 dataset 自定义属性

本文链接：https://blog.csdn.net/m0_37617778/article/details/84593988

版权

HTML5 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

html5中的自定义属性，以data-开头，可以通过html5提供的api获取

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>h5 自定义属性 data</title>
</head>
<body>
	<div type="text" id="user" data-name="ZhangSan" data-age="28" data-sex="male" data-user-name="ZhangSan001">
	</div>
	<script type="text/javascript">
		//设置自定义属性的方式 data-xxx
		//获取自定义属性的集合对象 DOMStringMap对象
		var user = document.querySelector('#user').dataset;
		//使用 集合对象.xxx 或 集合对象["xxx"]
		console.log(user.name + " " + user["age"] + " " + user.sex + " " + user.userName);

		//向集合中添加属性 
		user.id = "u001";//data-id = "u001"
		user.score = "90";//data-score = "90"

	</script>
</body>
</html>

示例2：根据自定义属性，实现tab页内容的切换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义属性例子-Tab页导航</title>
	<style type="text/css">
		body {
	      margin: 0;
	      padding: 0;
	      background-color: #F7F7F7;
	    }
		
		.tabs{
			width: 400px;
			background-color: #FFF;
			border: 1px solid  #93B9E1;
			margin:50px auto;
			box-sizing: border-box;
		}

		.tabs nav{
			line-height: 30px;
			text-align: center;
			background-color: #93B9E1;
			display: flex;
		}

		nav a{
			display: block;
			width:100px;
			border-right: 1px solid #FFF;
      		color: #000;
			text-decoration: none;
		}

		nav a.active {
	      background-color: #269DC1;
	    }

		nav a:last-child {
	      border-right: 0 none;
	    }
	    
	    .const{
			display: none;
	    }

	    li:first-child{
	    	background-color: yellow;
	    }

	    ol li{
	    	line-height: 30px
	    }
	</style>
</head>
<body>
	<div class="tabs">
		<nav>
			<a href="javascript:void(0);" class="active" data-const="myTab1">myTab1</a>
			<a href="javascript:void(0);"  data-const="myTab2">myTab2</a>
			<a href="javascript:void(0);"  data-const="myTab3">myTab3</a>
			<a href="javascript:void(0);"  data-const="myTab4">myTab4</a>
		</nav>
		<section class="const" id="myTab1" style="display: block;">
			<ol> 
				<li>haha1</li>
				<li>haha2</li>
				<li>haha3</li>
				<li>haha4</li>
				<li>haha5</li>
				<li>haha6</li>
			</ol>
		</section>
		<section class="const" id="myTab2">
			<ol>
				<li>xixi1</li>
				<li>xixi2</li>
				<li>xixi3</li>
				<li>xixi4</li>
				<li>xixi5</li>
				<li>xixi6</li>
			</ol>
		</section>
		<section class="const" id="myTab3">
			<ol>
				<li>hehe1</li>
				<li>hehe2</li>
				<li>hehe3</li>
				<li>hehe4</li>
				<li>hehe5</li>
				<li>hehe6</li>
			</ol>
		</section>
		<section class="const" id="myTab4">
			<ol>
				<li>lala1</li>
				<li>lala2</li>
				<li>lala3</li>
				<li>lala4</li>
				<li>lala5</li>
				<li>lala6</li>
			</ol>
		</section>
	</div>
	<script type="text/javascript">
		/*var alinks = document.querySelectorAll('nav a');

		for(let index in alinks){
			alinks[index].onclick = function(){
				var active = document.querySelector('.active');
				active.classList.remove("active")
				document.querySelector('#'+active.dataset.const).style.display = "none";

				this.classList.add("active");
				document.querySelector('#'+this.dataset.const).style.display = "block";
				
			}
		}*/

		//事件委托方式，利用事件冒泡，可以减少DOM操作，提高页面性能
		var navs = document.querySelector("nav");
		navs.onclick = function(e){
			var active = document.querySelector('.active');
			active.classList.remove("active")
			document.querySelector('#'+active.dataset.const).style.display = "none";

			var target = e.target || e.srcElement
			target.classList.add("active");
			document.querySelector('#'+target.dataset.const).style.display = "block";
		}

	</script>
</body>
</html>