js-文字段落显
<!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>JS特效-文字段落显示</title><style>#comment{ margin:0px auto; width:500px;}#comment div{ width:500px; border-bottom:1px solid #ccc; margin:0 0 10px 0; padding:10px 0;}#comment p{ line-height:150%; font-size:12px; color:#0066CC; display:inline;}#comment a{ font-size:12px; color:#999; line-height:150%; margin:0 0 0 10px;text-decoration:underline; display:none; cursor:pointer;}#comment a:hover{text-decoration:none; }</style><script>function onclick(elementID){ var elementDiv= document.getElementById(elementID); var elementP= elementDiv.getElementsByTagName('p'); for( i=0; i<elementP.length; i++){ change(i); }function change(i){ var elementHtml= elementP[i].innerHTML;//将elementHtml赋值给一个已经遍历出来的的p的元素 var elementLength= elementHtml.length;//提取elementHtml的长度 if( elementLength > 60){//判断长度是否大于六十 var moreBtn=elementP[i].nextSibling;//同级的下一个标签。这里应该是只的同级的字符。同级，就是把<a>遍历出来了。 var closeBtn=moreBtn.nextSibling;//就是把遍历<a>下一个出来了。 elementP[i].innerHTML=elementP[i].innerHTML.substr(0,60)+'...';// elementP[i].innerHTML,被重新赋值了，只当字符大于六十时候，只截取elementP[i]到60的位置，加上…这个些 moreBtn.style.display="inline"; //查看更多 moreBtn.onclick=function(){ elementP[i].innerHTML=elementHtml; this.style.display="none"; closeBtn.style.display="inline"; return false; } //收起查看更多 closeBtn.onclick=function(){ elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...'); this.style.display="none"; moreBtn.style.display="inline-block"; return false; } }} }window.onload=function(){ onclick('comment'); }</script></head><body><div id="comment"> <div><p id="teshu">呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p><a>更多>></a><a>收起>></a></div> </div></body></html>