Hello,在经过一系列艰难的决定之后,我开出了这么一个误人子弟系列其实就是炒冷饭。
我不知道会写多少篇,反正写着再说,出问题了请见谅,毕竟是误人子弟嘛,有问题请评论,我好修改。
先从简单的开始。
来吃狗。
<input type="button" value="width">
<input type="button" value="height">
<input type="button" value="background">
<input type="button" value="hidden">
<input type="button" value="reset">
<div id="div"></div>
比如现在有这些dom,我们通过这个button的点击去修改div的一些属性。怎么做呢?
var attributes=['width','height','background','display','display'];
var values=['200px','200px','red','none','block'];
var div=document.getElementById('div');
var btns=document.getElementsByTagName('input');
for(var i=0,len=btns.length;i<len;i++){
btns[i].index=i;
btns[i].onclick=function(){
div.style.cssText="";
div.style[attributes[this.index]]=values[this.index];
}
}
为了方便,我们把要改的一些属性写出数组,然后遍历那几个按钮,加上索引,然后绑定点击事件,修改样式,简单的来说就是类似div.style['width'] = '200px'
的方式修改。
讲讲切换css样式,就是传说中的换肤功能的基础。
页面中引入css样式的一般都是用<link rel="stylesheet" href="a.css">
,所以我们通过修改这个href来改变页面中的外链样式。
<span title="red">red</span>
<span title="blue">blue</span>
<div id="div">this is a div</div>
var btns=document.getElementsByTagName('span');
var link=document.getElementsByTagName('link');
for(var i=0,len=btns.length;i<len;i++){
btns[i].onclick=function(){
for(var j in btns)
btns[j].className="";
this.className="current";
link[0].setAttribute("href",this.title+".css");
}
}
这样我们可以切换red.css和blue.css来切换皮肤。
js函数中有个重要的东西,叫arguments数组,举个例子
<input type="text" value="input1">
<input type="text" value="input2">
<button>alert</button>
window.onload=function(){
var inputs=document.getElementsByTagName('input');
var button=document.getElementsByTagName('button')[0];
button.onclick=function(){
fun(inputs[0].value,inputs[1].value);
}
}
function fun(){
for(var i in arguments){
alert(arguments[i]);
}
}
主要是这个fun函数把一系列参数弹窗。
夜深了,先放这么三段吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。