本文以http://fgm.cc/learn/链接的实例索引为基础，可参见其实际效果。分析和整理了一些有用的javascript实例，相信对一些初学者有一定的帮助。本人水平有限，有许多不足的地方还望包涵，指正。废话不多说，正文以代码开始，不在代码中死去，就在代码中重生。不经历码农，如何来做攻城狮。
1 控制div属性
//参数为对象，样式属性和值
var changeStyle=function(elem,attr,value){
elem.style[attr]=value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for(var i=0,l=obtn.length;i<l;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
//这里用this来获取i值原理是什么？好像都用闭包传值，
//this.index已经是onclick的局部变量了
//若索引值是4重置，则执行后面括号的内容(初始状态)。若不是则后面括号不执行
this.index==l-1&&(oDiv.style.cssText="");
changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
} }
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body> 2 鼠标移入和移除样式改变
window.onload = function ()
{
var oDiv = document.getElementById("div1");
//在css先设置好不同的样式，通过改变样式类名来改变效果。
oDiv.onmouseover = function ()
{
oDiv.className = "hover"
};
oDiv.onmouseout = function ()
{
oDiv.className = ""
}
};
<body>
<div id="div1">鼠标移入改变样式，鼠标移出恢复。</div>
</body> 3 记住密码提示框
window.onload = function ()
{
var oTips = document.getElementById("tips");
var oLabel = document.getElementsByTagName("label")[0];
//这种提示功能通过鼠标的划入和划出，来改变预定好样式的显示和隐藏。以达到视觉效果的改变
oLabel.onmouseover=function(){
oTips.style.display="block";
};
oLabel.onmouseout=function=function(){
oTips.style.display="none";
}
}
<div id="outer">
<label><input type="checkbox" />两周内自动登陆</label>
<div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div>
</div> 4 百度输入法
window.onload = function ()
{
var oBtn = document.getElementsByTagName("button")[0];
var oIme = document.getElementById("ime");
var oClose = document.getElementById("close");
var style = oIme.style;
oBtn.onclick=function(){
//先执行判断再赋值，点击时若显示则隐藏，若隐藏则显示。这个?判断起到了切换的作用，保证效果不中断
style.display=style.display=="block"?"none":"block";
};
oBtn.onclick=function(){
style.display="none";
}
}
<body>
<div id="outer">
<button>输入法</button>
<ul id="ime">
<li><a href="javascript:;">手写</a></li>
<li><a href="javascript:;">拼音</a></li>
<li id="close"><a href="javascript:;">关闭</a></li>
</ul>
</div>
</body>