总结：
1. 点击按钮，div内部变色，边框保持颜色不变。
实现原理：其实本来就把background 和 border 分别设置了同一个颜色，看似是一个整体，其实本来就是分开的。
那么点击的时候，只需要更改background 的颜色。 border 部分不需要设置。
2. for in 循环，遍历数组的用法：
for(var p in oSkin) oSkin[p].className = "";
等价于下面的代码：
for(var i=0; i<aDiv.length; i++)
{
aDiv[i].className = ''；
};
3. 把要更改的式样分别用外部样式表存起来，只更改引入link的href值。
oLink['href'] = this.id + ".css";
疑问：
1. 更改类名，引发按钮的背景色变化，CSS里要设置 !important 才生效， 原理是？
.active{
background: white!important;
/* 这里设置了important才能生效，原理？ */
}
案例写的：
<link href="green.css" rel="stylesheet" type="text/css" /> <script> window.onload = function () { var oLink = document.getElementsByTagName("link")[0]; var oSkin = document.getElementById("skin").getElementsByTagName("li"); for(var i = 0; i< oSkin.length; i++) { oSkin[i].onclick = function () { for(var p in oSkin) oSkin[p].className = ""; this.className = "current"; oLink['href'] = this.id + ".css"; } } }; </script>
自己做的：
<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{ 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>