• 当前标签:event

程序开发 使用JavaScript实现背景颜色的替换

第一种方式: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>动态皮肤-1</title>         <link rel="stylesheet" type="" href="red.css">         <style>             body{                 margin: 0;             }             nav{                 padding: 10px;                 background-color: #222;             }             span{                 width: 20px;                 height: 20px;                 display: inline-block;             }             span:nth-child(1){                 background-color: red;             }             span:nth-child(2){                 background-color: blue;             }             span:nth-child(3){                 background-color: green;             }             span:nth-child(4){                 background-color: yellow;             }         </style>     </head>     <body>         <nav>             <span data-color = "red"></span>             <span data-color = "blue"></span>             <span data-color = "green"></span>             <span data-color = "yellow"></span>         </nav>         <script>             var nav =document.querySelector('nav')             nav.onclick =function(event){                 // event 包含触发事件的标签元素及与事件相关的一些数据                 var ele = event.target                 // 触发事件的标签元素                 if(ele.tagName == 'SPAN'){                     var color = ele.dataset.color                     var link =document.createElement('link')                     link.rel = 'stylesheet'                     link.href = color + '.css'                     document.head.appendChild(link)                     // 会导致head里面的link越来越多 页面上的样式越来越多                 }             }         </script>     </body> </html> 第二种: <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>动态皮肤-2</title>         <link rel="stylesheet" type="" href="red.css">         <link rel="stylesheet" type="" href="blue.css">         <link rel="stylesheet" type="" href="green.css">         <link rel="stylesheet" type="" href="yellow.css">         <style>             body{                 margin: 0;             }             nav{                 padding: 10px;                 background-color: #222;             }             span{                 width: 20px;                 height: 20px;                 display: inline-block;             }             span:nth-child(1){                 background-color: red;             }             span:nth-child(2){                 background-color: blue;             }             span:nth-child(3){                 background-color: green;             }             span:nth-child(4){                 background-color: yellow;             }         </style>     </head>     <body>         <nav>             <span data-color = "0"></span>             <span data-color = "1"></span>             <span data-color = "2"></span>             <span data-color = "3"></span>         </nav>         <script>             var links =document.querySelectorAll('link[rel=stylesheet]')             function enableLinks(index){                 for(var i = 0;i < links.length;i++){                     links[i].sheet.disabled = i != index                     // disabled 检查是否可编辑 true不可编辑 false可编辑                     // link[i].sheet 样式表                     // disabled 是否已应用当前样式表                     // 先执行 i != index 如果为 true 表示关闭样式表 如果为false则打开样式表                 }             }             document.querySelector('nav').onclick =function(event){                 var index = event.target.dataset.color                 if(index){                     enableLinks(index)                 }             }         </script>     </body> </html> 演示效果: 第一种、第二种

2017-07-19 21:20:42 66 0 0
阅读详情
  • 1
前往