一、找到元素:
docunment.getElementById("id"); 根据id找,最多找一个;
var a =docunment.getElementById("id"); 将找到的元素放在变量中;
docunment.getElementsByName("name"); 根据name找,找出来的是数组;
docunment.getElementsByTagName("name"); 根据标签名找,找出来的是数组;
docunment.getElementsByClassName("name") 根据classname找,找出来的是数组;
二、操作内容:
1. 非表单元素:
1)获取内容:
alert(a.innerHTML); 标签里的html代码和文字都获取了,标签里面的所有内容。
alert(a.innerText); 只取里面的文字
alert(a.outerHTML); 包括标签本身的内容(简单了解)
2)设置内容:
a.innerHTML = "<font color=red >hello world </font>";
a.innerText会将赋的东西原样呈现
清空内容:赋值个空字符串
2. 表单元素:
1)获取内容,有两种获取方式:
var t = document.f1.t1; form表单ID为f1里面的ID为t1的input;
var t = document.getElementById("id"); 直接用ID获取。
alert(t.value); 获取input中的value值;
alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>;
2)设置内容: t.value="内容改变";
3. 一个小知识点:
<a href="http://www.baidu.com" onclick ="return false">转向百度</a> ;
加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。
三、操作属性
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名"); 获取属性的值;
a.removeAttribute("属性名"); 移除一个属性。
四、操作样式
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.style="" ;操作此ID样式的属性。
样式为CSS中的样式,所有的样式都可以用代码进行操作。
document.body.style.backgroundColor="颜色"; 整个窗口的背景色。
操作样式的class:a.className="样式表中的classname" 操作一批样式
例:展示图片的自动和手动切换;
若要让图片轮播有过渡效果 则在放置大图的div标签里建立一个表格存放图片,用js控制表格的marginleft属性从而实现(手风琴
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * { margin:0px; padding:0px;} body { min-900px;} #datu { 800px; height:500px; position:relative; margin:30px auto; overflow:hidden;} .datu { 1200px; height:500px; position:relative; margin:30px auto; overflow:hidden;} #ta { margin-left:0px; transition:0.7s;} .lr { position:absolute; top:230px; 32px; height:32px; z-index:99;} #left { left:10px; } #right { right:10px; } .suolue { height:60px; 450px; position:relative; margin:auto; line-height:60px;} .suolue1 { height:50px; 80px; float:left; border: 4px solid #666; background-size:contain; background-position:center;} .u1 { list-style-type:none;} .u1 li { float:left; margin-left:2px;} .u2 { list-style-type:none;} .u2 li { float:left;} .fengqin { height:500px; 100px; background-repeat:no-repeat; background-position:center; transition:0.7s;} </style> </head> <body> <div id="datu" onmouseover="pause()" onmouseout="conti()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td width="800"><img src="Images/1.jpg" /></td> <td width="800"><img src="Images/2.jpg" /></td> <td width="800"><img src="Images/3.jpg" /></td> <td width="800"><img src="Images/4.jpg" /></td> <td width="800"><img src="Images/5.jpg" /></td> </tr> </table> <div class="lr" id="left" onclick="dong(-1)"> <img src="Images/left.png" /> </div> <div class="lr" id="right" onclick="dong(1)"> <img src="Images/right.png" /> </div> </div> <div class="suolue"> <ul class="u1"> <li><div class="suolue1" style="background-image:url(Images/1.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li> <li><div class="suolue1" style="background-image:url(Images/2.jpg)" id="tu2" onclick="xiaotu(2)"></div></li> <li><div class="suolue1" style="background-image:url(Images/3.jpg)" id="tu3" onclick="xiaotu(3)"></div></li> <li><div class="suolue1" style="background-image:url(Images/4.jpg)" id="tu4" onclick="xiaotu(4)"></div></li> <li><div class="suolue1" style="background-image:url(Images/5.jpg)" id="tu5" onclick="xiaotu(5)"></div></li> </ul> </div> <div class="datu" onmouseover="stp()" onmouseout="goon()"> <ul class="u2"> <li><div class="fengqin" id="l1" onmouseover="fq(1)" style="800px; background-image:url(Images/1.jpg)"></div></li> <li><div class="fengqin" id="l2" onmouseover="fq(2)" style="background-image:url(Images/2.jpg)"></div></li> <li><div class="fengqin" id="l3" onmouseover="fq(3)" style="background-image:url(Images/3.jpg)"></div></li> <li><div class="fengqin" id="l4" onmouseover="fq(4)" style="background-image:url(Images/4.jpg)"></div></li> <li><div class="fengqin" id="l5" onmouseover="fq(5)" style="background-image:url(Images/5.jpg)"></div></li> </ul> </div> </body> </html> <script> document.getElementById("ta").style.marginLeft="0px"; var biao=1; function huan() { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(a<=-3200) { tu.style.marginLeft="0px"; } else { tu.style.marginLeft= (a-800)+"px"; } document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; var b = parseInt(document.getElementById("ta").style.marginLeft); if(b==0) { document.getElementById("tu1").style.borderColor="red"; } else if(b==-800) { document.getElementById("tu2").style.borderColor="red"; } else if(b==-1600) { document.getElementById("tu3").style.borderColor="red"; } else if(b==-2400) { document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("tu5").style.borderColor="red"; } shi =window.setTimeout("huan()",3000); } var shi =window.setTimeout("huan()",3000); function pause() { window.clearTimeout(shi); } function conti() { shi = window.setTimeout("huan()",3000); } function dong(ad) { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(ad==-1) { if(a==0) { tu.style.marginLeft=-3200+"px"; } else { tu.style.marginLeft= (a+800)+"px"; } } else { if(a==-3200) { tu.style.marginLeft=0+"px"; } else { tu.style.marginLeft= (a-800)+"px"; } } document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; var b = parseInt(document.getElementById("ta").style.marginLeft); if(b==0) { document.getElementById("tu1").style.borderColor="red"; } else if(b==-800) { document.getElementById("tu2").style.borderColor="red"; } else if(b==-1600) { document.getElementById("tu3").style.borderColor="red"; } else if(b==-2400) { document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("tu5").style.borderColor="red"; } } function xiaotu(x) { document.getElementById("tu1").style.borderColor="#666"; document.getElementById("tu2").style.borderColor="#666"; document.getElementById("tu3").style.borderColor="#666"; document.getElementById("tu4").style.borderColor="#666"; document.getElementById("tu5").style.borderColor="#666"; if(x==1) { document.getElementById("ta").style.marginLeft="0px"; document.getElementById("tu1").style.borderColor="red"; } else if(x==2) { document.getElementById("ta").style.marginLeft="-800px"; document.getElementById("tu2").style.borderColor="red"; } else if(x==3) { document.getElementById("ta").style.marginLeft="-1600px"; document.getElementById("tu3").style.borderColor="red"; } else if(x==4) { document.getElementById("ta").style.marginLeft="-2400px"; document.getElementById("tu4").style.borderColor="red"; } else { document.getElementById("ta").style.marginLeft="-3200px"; document.getElementById("tu5").style.borderColor="red"; } } function fengqin() { var li1 =parseInt(document.getElementById("l1").style.width); var li2 =parseInt(document.getElementById("l2").style.width); var li3 =parseInt(document.getElementById("l3").style.width); var li4 =parseInt(document.getElementById("l4").style.width); var li5 =parseInt(document.getElementById("l5").style.width); document.getElementById("l1").style.width="100px"; document.getElementById("l2").style.width="100px"; document.getElementById("l3").style.width="100px"; document.getElementById("l4").style.width="100px"; document.getElementById("l5").style.width="100px"; if(li1==800) { document.getElementById("l2").style.width="800px"; } else if(li2==800) { document.getElementById("l3").style.width="800px"; } else if(li3==800) { document.getElementById("l4").style.width="800px"; } else if(li4==800) { document.getElementById("l5").style.width="800px"; } else { document.getElementById("l1").style.width="800px"; } change=window.setTimeout("fengqin()",3000); } function fq(c) { document.getElementById("l1").style.width="100px"; document.getElementById("l2").style.width="100px"; document.getElementById("l3").style.width="100px"; document.getElementById("l4").style.width="100px"; document.getElementById("l5").style.width="100px"; if(c==1) { document.getElementById("l1").style.width="800px"; } else if(c==2) { document.getElementById("l2").style.width="800px"; } else if(c==3) { document.getElementById("l3").style.width="800px"; } else if(c==4) { document.getElementById("l4").style.width="800px"; } else if(c==5) { document.getElementById("l5").style.width="800px"; } } var change=window.setTimeout("fengqin()",3000); function stp() { window.clearTimeout(change); } function goon() { change=window.setTimeout("fengqin()",3000); } </script>
)