使用JavaScript实现背景颜色的替换

黄良钵

分类: 程序开发 794 0

第一种方式:

  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.                 }
  62.             }
  63.         </script>
  64.     </body>
  65. </html>

演示效果:

第一种第二种

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
event、JavaScript、target

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “使用JavaScript实现背景颜色的替换”

Loading...