ホームページ > 記事 > ウェブフロントエンド > ブラウザごとの JavaScript setAttribute、getAttribute のパフォーマンスの違い_JavaScript スキル
テスト環境(クライアントブラウザ)
IE6、IE7、IE8互換モード、IE8
Firefox 3.6.8、google chrome 5.0.375.125
まず、2つの関数定義の規格について説明します。
elementNode.setAttribute(name,value)
名前は必須です。設定する属性名を指定します。
値が必要です。設定する属性値を指定します。
このメソッドは、指定された属性を指定された値に設定します。指定された名前のプロパティが存在しない場合、このメソッドは新しいプロパティを作成します。
elementNode.getAttribute(name)
名前は必須です。属性値を取得する属性を指定します。
1. setAttribute
elementNode の問題です。
行をクリックするためのイベント ハンドラーを追加したいと考えています。
1:
table1row1.setAttribute("onclick", "selectrow1(this)");
IE8、Firefox、および Google Chrome はクリック イベント
IE6 を正しくトリガーできますが、IE7 はクリック イベントをトリガーできません。
書き込み 2:
table2row1.onclick = function() { selectrow2(this) };
すべてのテスト ブラウザーはクリック イベントをトリガーできます
したがって、さまざまな IE で互換性を持たせるために、次のステートメントを統一して使用できます。
table2row1.onclick = function() { selectrow2(this) };
2. getAttribute の問題
elementNode は...
まず setAttribute
table1row1.setAttribute("level", 1) で属性を設定します。 ;
getAttribute を使用してラベルの属性値を取得します。
var level = table1row1.getAttribute("level");
alert("table1row1 level:" level "rntypeof(level) = " (typeof ( level) ).toString());
IE6 および 7 で表示
table1row1 level:1
typeof(level) =number
IE8、Firefox では、 google
table1row1 level:1
typeof(level) = string
は、これら 2 つの状況を均一に処理するために Chrome に表示されます。コードは次のように統一されています:
コードは次のとおりです:
var level = table1row1.getAttribute("level"); if (level === undefined || level == null) { level = "0"; } level = level.toString(); if (level.trim() == "") { level = "0"; }
$addHandler(row,"click", function() { selectrow(this) });
コードは次のとおりです:
Test table1
No. Item 1 2C.40E80.041 2 4L.013Y2.003
table2
No. Item 1 4G.0QE18.001 2 2K.61209.208
上記は、さまざまなブラウザーでの JavaScript setAttribute と getAttribute のさまざまなパフォーマンスです_JavaScript スキル、詳細関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。