JavaScript は指定された長さの文字列をインターセプトし、クリックして code_javascript スキル全体を展開します-jsチュートリアル-php.cn

JavaScript は指定された長さの文字列をインターセプトし、クリックして code_javascript スキル全体を展開します

WBOY

リリース： 2016-05-16 15:27:42

オリジナル

1463 人が閲覧しました

記事の長さがあまり適切でない場合、元の長さで表示されると、Web ページのレイアウトや美観に影響を与える可能性があります。このとき、状況に応じて特定の文字列をインターセプトする必要があります。ただし、ボタンをクリックすると、すべてのコンテンツを展開できます。コード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
 width:200px;
 margin:0px auto;
}
</style>
<script type="text/javascript"> 
function cutStr(){ 
 var odiv=document.getElementById("thediv"); 
 var str=odiv.innerHTML; 
 var ospan=document.createElement("span"); 
 var olink=document.createElement("a"); 
 ospan.innerHTML=str.substring(0,20); 
 olink.innerHTML=str.length>20&#63;"...":""; 
 olink.href="###"; 
 olink.onclick=function(){ 
  if(olink.innerHTML=="..."){ 
   olink.innerHTML="收起"; 
   ospan.innerHTML=str; 
  }
  else{ 
   olink.innerHTML="..."; 
   ospan.innerHTML=str.substring(0,20); 
  } 
 } 
 odiv.innerHTML=""; 
 odiv.appendChild(ospan); 
 odiv.appendChild(olink); 
}; 
window.onload=function(){
 cutStr();
}
</script> 
<body>
<div id="thediv">脚本之家欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div> 
</body>
</html>

ログイン後にコピー

上記のコードは要件を実装し、指定された文字列をインターセプトし、「...」で終了します。この末尾をクリックすると、すべてのテキストコンテンツを展開できます。以下は、この効果の実装プロセスの概要です。

1. 実装原則:

span 要素と要素を作成し、substring() 関数を使用して指定された文字列をインターセプトし、span 要素のコンテンツとして設定し、元の文字列の長さが指定された長さより大きいかどうかを判断します。それが大きい場合、要素内の内容は「...」に設定されます。次に元の div をクリアし、div にspan要素と要素を追加することでインターセプト機能を実現します。 a 要素に時間処理関数を登録します。このボタンをクリックすると、イベント処理関数が実行されます。この関数は、最初にその状態がどのような状態であるかを判断します。折りたたまれた状態の場合、a 要素の内容は「」に設定されます。展開状態の場合は文字がインターセプトされ、a要素の内容が変更されます。原理はほぼ同じなので、関連する資料を参照してください。

上記の内容は、この記事で紹介する、指定された長さの文字列をインターセプトする JavaScript です。クリックしてコード全体を展開してください。