js学习记录（一）js改变z-index样式

实现的功能：页面里同一区域有两个内容，它们是重叠的。用两个按钮控制谁来显示。通过input的onclick调用js实现。

布局：父标签的position设置成relative或absolute。子标签都设置成absolute，top和left都设置成一样。可以实现重叠的效果。并且要设置层级关系

.notebook {
	position: relative;
	float:right;
	background-color: #dd2;
	width:800px;
	height: 800px;
}
#book{
	position: absolute;
	top:0;
	left: 0;
	z-index: 1000
}
#note{
	position: absolute;
	top:0;
	left: 0;
	z-index: 999;

接下来布置好两个按钮：

<input id="btn1" onclick="btnClick('book')" type="button" value="资料" style="width:50px;height:30px;">
<input id="btn2" onclick="btnClick('note')" type="button" value="笔记" style="width:50px;height:30px;">

其中onclick="btnClick('book')"调用了btnClickd的js函数，并且给函数传入‘book’的参数，即要显示内容的id；

js代码：

var indexCount=1000;
function btnClick(idname){
	indexCount++;
	document.getElementById(idname).style.zIndex=indexCount;

总结：
1.js改变css样式，样式名字都要改成驼峰形的，比如：z-index改成zIndex.
2.原来是用click（）来当作函数名，结果一直没有调用这个函数，弄了半天，才发现不能用这个名字。难道是click跟其他函数名字冲突了。教训是下次不能乱起名字，尤其是这种很容易撞车的名字。