- ベストアンサー
指定字数以降隠す
<div id="nakami"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす </div> ----- が（今回8文字目以降隠すと仮定して） ----- いろはにほへと... 続きを表示 ----- になって 続きを表示を押すと -------- いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす 閉じる ------- になるようなイメージです。 本文中にタグがあった場合でも上手く動作すると尚うれしいです。 よろしくお願いします。
- xindex
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たぶん下記のような具合でしょう … <script type="text/javascript"> <!-- var objNakami; var objHidden; var objLink; function myLoad() { objNakami = document.getElementById("nakami"); if ( objNakami.childNodes.length == 1 ) { objHidden = document.createElement("INPUT"); objHidden.value = objNakami.innerText; // 何文字目かは substringの引数を調整してください objNakami.innerText = objNakami.innerText.substring( 0, 7 ) + "..."; objHidden.type ="hidden"; objNakami.appendChild( objHidden ); // いろは歌と リンクの間に改行が必要なら // objNakami.appendChild( document.createElement( "<br>" ) ); objLink = document.createElement("A") objLink.innerText = "続きを表示"; objLink.href = "javascript:myLoad();"; objNakami.appendChild( objLink ); } else { var ss = objHidden.value; objNakami.removeChild( objHidden ); objNakami.removeChild( objLink ); objNakami.innerText = ss; } } //--> </script> </head> <body onload="myLoad();">
その他の回答 (1)
- Yanch
- ベストアンサー率50% (114/225)
やりたい処理は、次のような事ですか。 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <script type="text/javascript"> <!-- function cmd_hidden(id) { var obj_short = document.getElementById(id + "_short"); obj_short.style.display = "block"; var obj_long = document.getElementById(id + "_long"); obj_long.style.display = "none"; } function cmd_visible(id) { var obj_short = document.getElementById(id + "_short"); obj_short.style.display = "none"; var obj_long = document.getElementById(id + "_long"); obj_long.style.display = "block"; } // --> </script> </head> <body> <div id="nakami_short" style="display: block;"> いろはにほへと...<br> <a href="javascript:void(0);" onclick="return cmd_visible('nakami');">続きを表示</a> </div> <div id="nakami_long" style="display: none;"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす<br> <a href="javascript:void(0);" onclick="return cmd_hidden('nakami');">閉じる</a> </div> </body> </html>
お礼
回答ありがとうございます。 動作としてはこのような感じです。 これと同じような動作を いろは歌を二つ用意するのではなく、 元の完全な文を指定文字数以降jsにより隠したいのです。
お礼
回答ありがとうございます。 目標に近づいてきました！ あとは、元文にタグが含まれていても機能すると最高なのですが、難しそうですね・・・
補足
こちらを参考に <script type="text/javascript"> <!-- var objNakami; var objHidden; var objSwit var flagdayo = 1; window.onload=function myLoad() { objNakami = document.getElementById("nakami"); objSwit = document.getElementById("swit"); if ( flagdayo == 1 ) { objHidden = document.createElement("INPUT"); objHidden.value = objNakami.innerText; // 何文字目かは substringの引数を調整してください objNakami.innerText = objNakami.innerText.substring( 0, 7 ) + "..."; objHidden.type ="hidden"; objNakami.appendChild( objHidden ); flagdayo = 0; objNakami.appendChild( document.createElement( "<br>" ) ); objSwit.innerText = "続きを表示"; objSwit.href = "javascript:myLoad();"; } else { var ss = objHidden.value; objNakami.removeChild( objHidden ); objNakami.innerText = ss; objNakami.appendChild( document.createElement( "<br>" ) ); objSwit.innerText = "閉じる"; flagdayo = 1; } } // --> </script> </head> <body> <div id="nakami"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす </div> <a id="swit"></a> </body>