JavaScript实现添加、查找、删除元素
代码很简单,这里就不多废话了。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>测试文件</title> <style> .reply{ width:500px; height:100%; overflow:hidden; background-color:#CCC; margin-top:10px; } .infoArea{ width:380px; height:100%; overflow:hidden; } .words{ width:380px; height:auto; margin:5px0px; float:left; font-size:14px; } .time{ margin-left:10px; margin-bottom:3px; width:150px; height:20px; line-height:20px; float:left; font-family:楷体; font-size:14px; color:#999; } .replyButton{ width:60px; height:20px; float:left; margin-bottom:10px; } .replyButtoninput{ font-size:12px; } #cancelButton{ visibility:hidden; } </style> </head> <body> <divclass="reply"> <divclass="infoArea"> <divclass="words"><ahref="">中央情报局</a>:中央情报局</div> <divclass="time">2014年5月4日21:56</div> <divclass="replyButton"> <inputtype="button"id="submitButton"value="回复"onClick="showReplyArea(this)"/> </div> <divclass="replyButton"> <inputtype="button"id="cancelButton"value="取消"onClick="hideReplyArea(this)"/> </div> </div> </div> <script> //显示文本框的函数 functionshowReplyArea(src) { inputText=document.createElement("DIV"); inputText.className="inputText"; inputText.style.width='100%'; inputText.style.height='75px'; inputText.style.margin='3px0'; inputText.style.cssFloat='left'; vargrandfather=src.parentNode.parentNode.parentNode; grandfather.appendChild(inputText); form1=document.createElement("FORM"); form1.action=""; form1.method="post"; inputText.appendChild(form1); inputTextArea=document.createElement("TEXTAREA"); inputTextArea.style.width='380px'; inputTextArea.style.height='40px'; inputTextArea.style.marginLeft='60px'; inputTextArea.style.marginTop='3px'; inputTextArea.style.cssFloat='left'; inputTextArea.style.resize='none'; textSubmit=document.createElement("INPUT"); textSubmit.type='submit'; textSubmit.value='提交'; textSubmit.style.marginLeft='80px'; textSubmit.style.cssFloat='left'; form1.appendChild(inputTextArea); form1.appendChild(textSubmit); cancelButton=grandfather.getElementsByTagName("INPUT").item(1); cancelButton.style.visibility='visible'; submitButton=src; submitButton.disabled=true; } //隐藏文本框的函数 functionhideReplyArea(src) { vargrandfather=src.parentNode.parentNode.parentNode; varinputText=grandfather.getElementsByClassName('inputText').item(0); grandfather.removeChild(inputText); cancelButton=src; cancelButton.style.visibility='hidden'; submitButton=grandfather.getElementsByTagName("INPUT").item(0); submitButton.disabled=false; } //下面为调试时测试用函数,做完后就没用了,但也是很经典的一段代码,就留在这里了。 functionshowNode() { vari=4; submitButton=document.getElementById('submitButton'); i=submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value; alert(i); } </script> </body> </html>
示例二:
window.onload=function(){ vargaga=document.getElementById("gaga"); addClass(gaga,"gaga1") addClass(gaga,"gaxx"); removeClass(gaga,"gaga1") removeClass(gaga,"gaga") functionhasClass(elements,cName){ return!!elements.className.match(newRegExp("(\\s|^)"+cName+"(\\s|$)"));//(\\s|^)判断前面是否有空格(\\s|$)判断后面是否有空格两个感叹号为转换为布尔值以方便做判断 }; functionaddClass(elements,cName){ if(!hasClass(elements,cName)){ elements.className+=""+cName; }; }; functionremoveClass(elements,cName){ if(hasClass(elements,cName)){ elements.className=elements.className.replace(newRegExp("(\\s|^)"+cName+"(\\s|$)"),"");//replace方法是替换 }; }; };
以上所述就是本文的全部内容了,希望大家能够喜欢。