JS學習筆記 - fgm練習 - 網頁換膚
阿新 • • 發佈：2019-01-06
自己做的：
總結：
1. 點選按鈕，div內部變色，邊框保持顏色不變。
實現原理：其實本來就把background 和 border 分別設定了同一個顏色，看似是一個整體，其實本來就是分開的。
那麼點選的時候，只需要更改background 的顏色。 border 部分不需要設定。
疑問：
1. 更改類名，引發按鈕的背景色變化，CSS裡要設定 !important 才生效， 原理是？
.active{ background: white!important; /* 這裡設定了important才能生效，原理？ */ }
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}
body{ background-color: #a3c5a8; } ul{ margin: 5px auto; width: 500px; height: 25px; display: block; border: 1px solid white; background: green; } ul li{ list-style: none; float: left; width: 83px; text-align: center; box-sizing: border-box; border-right: 1px solid white; } ul li:last-child{ border: none; } ul li a{ color: white; text-decoration: none; font-size: 12px; line-height: 25px; } ul li a:hover{ text-decoration: underline; } #outer{ margin: 8px auto; width: 500px; } /* .click_div{ width: 14px; height: 14px; display: inline-block; margin-right: 7px; } */ #outer div{ margin-right: 7px; border-width: 4px; border-style: solid; width: 6px; height: 6px; display: inline-block; } /* 選色按鈕的構成：background 6px border 4px *2, 一共14px 每次點選，border顏色不變，設定background顏色變化。 */ #div1{ background-color: red; border-color: red; } #div2{ background-color: green; border-color: green; } #div3{ background-color: black; border-color: black; } .active{ background: white!important; /* 這裡設定了important才能生效，原理？ */ }
</style> <script> window.onload = function() { oDivOuter = document.getElementById('outer'); aDiv = oDivOuter.getElementsByTagName('div'); var oBody = document.getElementsByTagName('body')[0]; // 用TagName記得指定是第幾個 var oUl = document.getElementsByTagName('ul')[0]; // var btnColor = this.style.backgroundColor; var oBodyColor = ["pink", "#a3c5a8", "#ccc"]; var oUlColor = ["red", "green", "black"] for(i=0; i<aDiv.length; i++) { aDiv[i].index = i; aDiv[i].onclick = function() { for(var i=0; i<aDiv.length; i++) { aDiv[i].className = ''; }; this.className = "active"; // this.style.border = "4px" + btnColor + "solid"; oBody.style.backgroundColor = oBodyColor[this.index]; oUl.style.backgroundColor = oUlColor[this.index]; }; }; }; </script> </head> <body> <div id="outer"> <div id="div1"></div> <div id="div2" class="active"></div> <div id="div3"></div> <ul> <li><a href="javascript:;">新聞</a></li> <li><a href="javascript:;">娛樂</a></li> <li><a href="javascript:;">體育</a></li> <li><a href="javascript:;">電影</a></li> <li><a href="javascript:;">音樂</a></li> <li><a href="javascript:;">旅遊</a></li> </ul> </div> </body>