使用JavaScript实现背景颜色的替换
BG7ZAG
|
|
1,787
|
0
|
程序开发

488 字
|
3 分钟

第一种方式：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>动态皮肤-1</title>
  8.         <link rel="stylesheet" type="" href="red.css">
  9.         <style>
  10.             body{
  11.                 margin: 0;
  12.             }
  13.             nav{
  14.                 padding: 10px;
  15.                 background-color: #222;
  16.             }
  17.             span{
  18.                 width: 20px;
  19.                 height: 20px;
  20.                 display: inline-block;
  21.             }
  22.             span:nth-child(1){
  23.                 background-color: red;
  24.             }
  25.             span:nth-child(2){
  26.                 background-color: blue;
  27.             }
  28.             span:nth-child(3){
  29.                 background-color: green;
  30.             }
  31.             span:nth-child(4){
  32.                 background-color: yellow;
  33.             }
  34.         </style>
  35.     </head>
  36.     <body>
  37.         <nav>
  38.             <span data-color = "red"></span>
  39.             <span data-color = "blue"></span>
  40.             <span data-color = "green"></span>
  41.             <span data-color = "yellow"></span>
  42.         </nav>
  43.         <script>
  44.             var nav =document.querySelector('nav')
  45.             nav.onclick =function(event){
  46.                 // event 包含触发事件的标签元素及与事件相关的一些数据
  47.                 var ele = event.target
  48.                 // 触发事件的标签元素
  49.                 if(ele.tagName == 'SPAN'){
  50.                     var color = ele.dataset.color
  51.                     var link =document.createElement('link')
  52.                     link.rel = 'stylesheet'
  53.                     link.href = color + '.css'
  54.                     document.head.appendChild(link)
  55.                     // 会导致head里面的link越来越多 页面上的样式越来越多
  56.                 }
  57.             }
  58.         </script>
  59.     </body>
  60. </html>

第二种：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>动态皮肤-2</title>
  8.         <link rel="stylesheet" type="" href="red.css">
  9.         <link rel="stylesheet" type="" href="blue.css">
  10.         <link rel="stylesheet" type="" href="green.css">
  11.         <link rel="stylesheet" type="" href="yellow.css">
  12.         <style>
  13.             body{
  14.                 margin: 0;
  15.             }
  16.             nav{
  17.                 padding: 10px;
  18.                 background-color: #222;
  19.             }
  20.             span{
  21.                 width: 20px;
  22.                 height: 20px;
  23.                 display: inline-block;
  24.             }
  25.             span:nth-child(1){
  26.                 background-color: red;
  27.             }
  28.             span:nth-child(2){
  29.                 background-color: blue;
  30.             }
  31.             span:nth-child(3){
  32.                 background-color: green;
  33.             }
  34.             span:nth-child(4){
  35.                 background-color: yellow;
  36.             }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <nav>
  41.             <span data-color = "0"></span>
  42.             <span data-color = "1"></span>
  43.             <span data-color = "2"></span>
  44.             <span data-color = "3"></span>
  45.         </nav>
  46.         <script>
  47.             var links =document.querySelectorAll('link[rel=stylesheet]')
  48.             function enableLinks(index){
  49.                 for(var i = 0;i < links.length;i++){
  50.                     links[i].sheet.disabled = i != index
  51.                     // disabled 检查是否可编辑 true不可编辑 false可编辑
  52.                     // link[i].sheet 样式表
  53.                     // disabled 是否已应用当前样式表
  54.                     // 先执行 i != index 如果为 true 表示关闭样式表 如果为false则打开样式表
  55.                 }
  56.             }
  57.             document.querySelector('nav').onclick =function(event){
  58.                 var index = event.target.dataset.color
  59.                 if(index){
  60.                     enableLinks(index)
  61.                 }
  63.             }
  64.         </script>
  65.     </body>
  66. </html>

演示效果：

第一种、第二种

eventJavaScripttarget
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Vue使用websocket即时通信

							
							

							
字号与尺寸、像素对照表

							
							

							
小程序选择、预览、删除、上传图片

							
							

							
vue修改打包文件的路径

							
							

							
微信小程序所有组件初始化样式box-sizing

							
							

							
微信小程序picker组件中多列选择器的使用