js 排他思想(百度换肤+表单全选案例) 获取属性自定义值(tab栏切换案例) H5自定义属性

最新推荐文章于 2024-03-06 23:02:33 发布

phoebemeng

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量585

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/phoebemeng/article/details/125761165

版权

本文介绍了JavaScript的排他思想，并通过百度换肤、表单全选、获取自定义属性值以及tab栏切换等案例进行详细讲解。重点讨论了如何实现tab栏切换，并探讨了H5自定义属性的使用，包括设置、获取和兼容性问题。

摘要由CSDN通过智能技术生成

排他思想

先排除其他人,然后再设置自己,这种先排除其他人的思想成为排他思想.
案例:有5个相同按钮,点击到哪个按钮时哪个按钮的背景颜色变化,其他按钮不变.

<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		<script>
			// 获得元素
			var btns = document.getElementsByTagName('button');
			// 通过for循环遍历 绑定元素 
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					// 先排除其他
					for(var j= 0;j<btns.length;j++){
						btns[j].style.backgroundColor='';
					}
					// 再设置自己
					this.style.backgroundColor='pink';
				}
			}
			
		</script>
	</body>

案例-百度换肤效果

分析:
1.循环注册一组图片,点击后获取图片的src路径,把路径给body就可以设置背景了

<style>
			body{
				/* background-image: url(fyear1.png) no-repeat; */
				background: url(fyear1.png) no-repeat;
				background-size: 100%;	
			}
			.pic{
		
				width: 200px;
				height: 70px;
				margin: 50px auto;
			}
			.pic li{
				float:left;
				list-style: none;
			}
			img{
				width: 50px;
				height: 70px;
			}
		</style>