部分的に色をつけたい
-
0 名前： Seawolf ： 2006/04/21 01:00
- こんにちは。
getElementById()で特定してnodeValueで取得した文字列の
うち一部分を色変えしたいときはどうすればよいのでしょうか。
文字列はabc|xyzとしてsplit('|')[0]の部分だけを赤に変えたい
です。
エレメントに対してのstyle変更は分かるのですが、文字列か
らの部分変更で悩んでいます。
ご教示よろしくお願いします。
-
1 名前： Pid ： 2006/04/21 01:00
- 逆にお尋ねしますが，なぜ赤くしたいのですか。
スタイルを変更するということは，何か伝えたい意味があるはずです。意味を伝えるには要素化する（タグ付けする）しかありません。CSS と同じです。
たとえば，もし強調のためならば，そのテキストを内容とする em 要素を生成します。
var target = document.getElementById ('sample');
var node = target.firstChild; // 子はテキストノードしかないと仮定
// 方法 1：テキストノードを分割して最初の方を em 要素の子として移動
node.splitText (node.data.indexOf ('|'));
target.insertBefore (document.createElement ('em'), node).appendChild (node);
// 方法 2：指定した範囲を em 要素の子として移動（DOM2-Range）
var range = document.createRange ();
range.setStart (node, 0);
range.setEnd (node, node.data.indexOf ('|'));
range.surroundContents (target.insertBefore (document.createElement ('em'), node));
-
2 名前： Pid ： 2006/04/21 01:00
- 非公式でも良ければこんなのとか（結局は font 要素を生成しているだけですが）。
var str = target.innerHTML.split ('|');
target.innerHTML = str[0].fontcolor ('red') + str[1];
-
3 名前： Seawolf ： 2006/04/21 01:00
- Pidさん 丁寧なご説明ありがとうございます。
ECMA非標準でクロスＯＫなので#2のinnerHTMLの方法でうまく行
きそうです。本当にありがとうございました。
--
PS:なぜ赤にというご質問ですが、classNameとかでなくJavaScriptから
動的に変更したかったので。赤い色という意味じゃないですよねｗ
