0

やった： 

var element = document.getElementById('myelement');

今私はやりたい：

 element.myFunction();

しかし、関数内で要素を取得する方法がわかりません。どうすればいいですか？

function myFunction() {
// Get element here?
}
4

6 に答える 6

0

関数を要素と連鎖させたい場合は、HTMLElement、またはNode、オブジェクトのプロトタイプを拡張する必要があります。

HTMLElement.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

または：

Node.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

このアプローチthisでは、メソッド内で、myFunction()次によって選択された要素が参照されます。

document.getElementById('elementID').myFunction();

HTMLElementプロトタイプを使用したJS Fiddle demo 。

Nodeプロトタイプを使用したJS Fiddle demo 。

同様に、要素ノードを引数として「明示的に」渡すことなく関数に渡すだけの場合は、次のようになります。

function myFunction () {
    this.style.color = 'red';
}

document.getElementById('elementID').addEventListener('click', myFunction);

JS フィドルのデモ。

getElementsByTagName()、getElementsByClassName()またはquerySelectorAll()(とりわけ)によって選択された複数の要素を操作したい場合は、代わりに、次のようにNodeListプロトタイプを拡張する必要があります。

NodeList.prototype.myFunction = function (parameters) {
    var elements = this;
    [].forEach.call(elements, function(a){
        a.style.color = 'green';
    });
    return this; // for chaining
}

/* calling the function, with a simple demonstration of why you might want to
   chain, by returning 'this': */
var len = document.getElementsByClassName('elementClass').myFunction().length;
console.log(len);

JS フィドルのデモ。

于 2013-10-06T13:54:34.093 に答える
0

あなたが宣言しているのでJavaScriptで

var element = document.getElementById('myelement');

要素は既にグローバル スコープにあるため、関数内で簡単に呼び出すことができます。

function myFunction() {
  // Do something with your element
}

編集:代わりに別の関数内で要素を宣言する場合、または異なる要素に同じ関数を使用する場合は、パラメーターを使用する必要があります。これは呼び出しです：

myFunction(element)

そして、これが関数です

function myFunction(element) {
  // Do something with your element
}
于 2013-10-06T13:48:36.770 に答える
0

次のように、カスタム関数をHTMLElementオブジェクトのプロトタイプに追加できます。

HTMLElement.prototype.customFunc = function(){
    // within this function, 'this' will refer 
    // to the element that it was called on
};

これは、すべての要素がcustomFuncメソッドとして関数にアクセスできることを意味します。例えば：

HTMLElement.prototype.customFunc = function(){
    console.log(this.id);
};

// now assuming your HTML contains #myElement and #anotherElem:
document.getElementById('myElement').customFunc(); // displays 'myElement'
document.getElementById('anotherElem').customFunc(); // displays 'anotherElem'

明らかに、既存のメソッドやプロパティを上書きしたくないので、関数の命名には注意してください。

于 2013-10-06T13:59:07.257 に答える
0

それはあなたが望むものですか

    <input type = "button" value = "Next" id = "btnNext" />

    <script>
    HTMLElement.prototype.myFunction = function()
    {
        alert(this.id);
    }

    var elem = document.getElementById("btnNext");
    elem.myFunction();

    </script>
于 2013-10-06T13:59:47.360 に答える
0

与えられた

var element = document.getElementById('myelement');

thisキーワードを使用した関数が必要なようです

function myFunction() {
    console.log(this); // logs `this` (which will be `element`)
}

そして、できるようにプロパティを設定するのではなく、orelement.myFunction();を使用することをお勧めします。Function.prototype.callFunction.prototype.apply

myFunction.call(element); // element gets logged
于 2013-10-06T14:04:36.710 に答える
-1

むしろ、これを試す必要があります。onclick を使用した div の例を示します。

<script>

function myfunc(){
getElementById('sample').whatever function u want
}
</script>

そして体の中であなたが使うことができる -

<body>
<div id="sample" onclick="myfunc()">The function will happen onclicking the div</div>
</body>
于 2013-10-06T13:46:24.200 に答える