技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] 要素の中身を動的に変更 ・サイトマップ [Shift-S]

■ 要素の中身を動的に変更:kl_replace(id,s,mode)

【要素の中身を変更「kl_replace()」<keynavi_tools.js】

-------------------------------------------------------------------------------
■ kl_replace(id,s,mode,ns4,col)
・ 返り値:成功時は1、失敗時は0
・ id:中身を入れ替えるオブジェクトかそのID
・ s:入れ替える内容
・ mode:入れ替え方法(略可)
・ ns4:Netscape4.xにも出力したい場合真に(略可)
・ col:前景色(Note:Netscape4での前景色変更は中身書き替え時のみ有効)
-------------------------------------------------------------------------------
function kl_replace(id,s,mode,ns4,col){
        if(KL_OP6 && !KL_OP7) return 0;
        var e=kl_getelem(id); if(!e) return 0;
        var tn=kl_tagname(e);
        if(tn=="table" && e.id){
                var ee=kl_getelem("kl_content_"+e.id); if(ee) e=ee;
        }
        return kl_replace_raw(e,s,mode,ns4,col,"tail",tn=="td");
}
function kl_replace_raw(id,s,mode,ns4,col,ie4m_tail,ie4m_td){
        。。。(略)。。。
}

「mode」引数が 「"append"」の場合は文字列を後ろに追加、 「"prepend"」の場合は前に追加します(NS4除外)。 その他の場合や指定されていない場合は単に中身を丸ごと変更します。

Netscape4.xでは上のコードのように「document.write()」を使います。 半透明レイヤー:kl_tlayer_new() など スタイルシートで「position:absolute」を指定したdiv要素のみに 出力可能です。 但しレイヤーに対する「document.write()」は 何も起こらかったりレイアウトが崩れることがあります。 そのためデフォルトではNetscape4.xを無視しています。

Netscape4.xにも対応したい場合はオプションを有効にする前に ブラウザで実際に動作を確認しましょう。

MacIEではinnerHTMLでテーブルを出力したり セルの中身を書き替える時に テーブルが崩れるのでバグ対策をしています。 これをさせたくない場合は raw関数「kl_replace_raw()」を 必要な引き数のみ指定して呼び出してください。

Tips: 上のコードで「innerHTML」の代わりに「outerHTML」とすると要素を丸ごと置き換えます。

【kl_replace()を使ったサンプル】

<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
.....
<a href='javascript:void(0)' onclick='kl_replace("test1","変更されました"); return false;'>中身変更を実行</a>
.....
<span id="test1">変更される内容</span>

変更される内容:<div id="test1">...</div>の中身です

status出力をリダイレクト:kl_status(s,opt)




【JavaScript@Keynavi.Net : DOM編 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - id値からオブジェクト取得:kl_getelem(id)
  - 要素の位置、大きさなど各種属性を処理したい
  - 要素の中身を動的に変更:kl_replace(id,s,mode)
  - 要素の属性リストを取得

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] 要素の中身を動的に変更 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─