【Web前端笔记-基础】第十四课，Javascript的排他思想

最新推荐文章于 2024-05-05 16:12:15 发布

好好学习嘿嘿嘿

最新推荐文章于 2024-05-05 16:12:15 发布

阅读量330

点赞数

分类专栏： JavaScript Web 前端基础笔记文章标签：排他思想 Javascript 换肤表格换行换色表单全选取消

本文链接：https://blog.csdn.net/qq_42250032/article/details/103306393

版权

一：排他思想

如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。

先将其他元素的这个属性清空（干掉他人）。

在这个特殊元素下添加表现（留下自己）。

二：小案例

1.百度换肤，点击相应的图片，背景变成相应的图片。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度换肤</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			 body{
				 background-image: url(../img/BDOne.jpg);
				 background-repeat: no-repeat;
				 background-size: cover;
			 } 
			.baidu{
				overflow: hidden;
				margin: 100px auto;
				background-color: #FFFFFF;
				width: 410px;
				padding-top: 3px;
			}
			.baidu li{
				list-style: none;
				float: left;
				margin: 0 1px;
				
			}
			
			.baidu li img{
				width: 100px;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		
		<ul class="baidu">
			<li><img src="../img/BDOne.jpg" ></li>
			<li><img src="../img/BDTwo.jpg" ></li>
			<li><img src="../img/BDThree.jpg" ></li>
			<li><img src="../img/BDFour.jpg" ></li>
		</ul>
		
		<script type="text/javascript">
			//1获取元素
			var imgs=document.querySelector(".baidu").querySelectorAll("img");
			for(var i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){

最低0.47元/天解锁文章

好好学习嘿嘿嘿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记-基础】第十四课，Javascript的排他思想

一：排他思想如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。先将其他元素的这个属性清空（干掉他人）。在这个特殊元素下添加表现（留下自己）。二：小案例1.百度换肤，点击相应的图片，背景变成相应的图片。例子：<!DOCTYPE html><html> <head> <meta charset="utf-8...
复制链接

扫一扫