dポイントプレゼントキャンペーン実施中！

指定字数以降隠す

解決済

  • 質問者：xindex
  • 質問日時：
  • 回答数：2件

<div id="nakami">
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
</div>
-----
が（今回8文字目以降隠すと仮定して）
-----
いろはにほへと...
続きを表示
-----
になって
続きを表示を押すと
--------
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
閉じる
-------
になるようなイメージです。
本文中にタグがあった場合でも上手く動作すると尚うれしいです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： redfox63
  • 回答日時：

たぶん下記のような具合でしょう …



<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();">

この回答への補足

こちらを参考に
<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>

補足日時：2008/11/07 01:46
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
目標に近づいてきました！
あとは、元文にタグが含まれていても機能すると最高なのですが、難しそうですね・・・

通報する
お礼日時：2008/11/07 01:50

No.1

  • 回答者： Yanch
  • 回答日時：

やりたい処理は、次のような事ですか。


----------------------------------------------------------------------
<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
動作としてはこのような感じです。
これと同じような動作を
いろは歌を二つ用意するのではなく、
元の完全な文を指定文字数以降jsにより隠したいのです。

通報する
お礼日時：2008/11/06 23:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報