电影选票 - 码农教程

这里面主要是有个getAttribute（），返回布尔值，判断元素是否有这个属性；
setAttribute（属性，赋值），给元素的属性赋值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul,li{
		margin:0;
		padding:0;
		list-style: none;
	}
	ul{
		width:560px;
		border:3px solid #eee;
		margin:0 auto;
	}
	li{
		width: 80px;
		height:40px;
		background: #ccc;
		border:1px solid #abc;
		float: left;
		margin:5px;
		/*选择时鼠标变成小手的样子*/
		cursor: pointer; 

	}
	div{
		width:280px;
		height:90px;
		border:1px solid #ccc;
		margin: 0 auto;
		text-align: center;
		line-height: 90px;
		color:#333;
	}
	.click{
		font-size:10px;
		text-align:center;
		line-height: 40px;
		font-family: '仿宋';
		font-weight: bold;
		color:#333;
		background: orange;
		border:1px solid red;
	}

	</style>
</head>
<body>
	<ul>
		<li></li>
	    <li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<!-- 额外标签清除li的浮动 -->
		<p style="clear:both;"></p>
		<div>屏幕中央</div>
	</ul>
	<script>
	// 实现逻辑：没有click类的时候，进行添加，同时对文本进行赋值；反之，清空click，同时，文本值为空
	let lis = document.getElementsByTagName('li');
	for(let i=0;i<lis.length;i++){2
		lis[i].onclick = function() {
			let res = this.getAttribute('class');
			if(!res){
				this.setAttribute('class','click')
				this.innerText = '座位已选'
			}
			else{
				this.setAttribute('class','')
				this.innerText = ''

			}
		}

	}


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

原文地址：https://www.cnblogs.com/gracexin/p/15111745.html