javascript - Javascript & オブジェクト & 関数

Question

という関数がありますhello()。

次に、DOM要素を取得しますx = document.getElementById("test");

この関数を次のように動作させるにはどうすればよいx.hello();ですか?

score 3 · Accepted Answer

要素に関数を追加する必要がある場合は、そのプロトタイプを変更する必要があります。

Element.prototype.hello = function() {
}

これは、どの要素を選択しても機能します。

要素のスタイルを変更したい場合、次のようになります。

Element.prototype.hello = function() {
    this.style.color = 'blue';
}

以下のコメントで説明されているように、これは必ずしも良い考えではありません。その理由について説明しているブログ投稿は次のとおりです: http://perfectionkills.com/whats-wrong-with-extending-the-dom/

したがって、できることは、Elements で動作するユーティリティクラスを作成することです。

それはどのように見えますか？

var DOM = {};
DOM.hello = function (element, worldParam) {
    element.style.color = worldParam;
}

などなど。

したがって、これを使用するには、次のようにします。

DOM.hello(document.getElementById('#test'));

score 2 · Accepted Answer

ページ上のすべての DOM 要素にを追加する場合は、そのプロトタイプを変更する必要がありhello()ます。

Element.prototype.hello = hello;

ただし、変更はページ上のほとんどすべての js コードに影響する可能性があるため、そうすることはお勧めしません。

hello()この特定の要素にを追加する場合は、次のように割り当てます。

x.hello = hello;

thisでhello()参照するようになりましたx

score 1 · Accepted Answer

x = document.getElementById("test");
x.prototype.hello = function() { // your function }

x.hello() を使用できるようになりました。

score 1 · Accepted Answer

これをチェックしてください。

このリンクでは、jsfiddle のサンプルスクリプトが表示されます。

4 に答える 4