在函數中獲取元素

Question

我做了：

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

現在我想做：

 element.myFunction();

但是我不知道如何在函數中獲取元素。 我該怎么做呢？

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

Answer 1

在JavaScript中，因為您要聲明

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

您已經在全局范圍內擁有該元素，因此您可以在函數內部簡單地調用它

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

編輯：如果要在另一個函數中聲明元素，或者要對不同元素使用相同的函數，則必須使用參數。 這是電話：

myFunction(element)

這就是功能

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

Answer 2

如果要將函數與元素鏈接，則需要擴展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
}

通過這種方法， myFunction()方法內部的this將引用由以下元素選擇的元素：

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

JS Fiddle演示，使用HTMLElement原型。

JS Fiddle演示，使用Node原型。

同樣的，如果你想要做的就是將元素節點的功能，無需“明確”它作為參數傳遞：

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小提琴演示。

Answer 3

您可以像這樣將自定義函數添加到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'

顯然，請謹慎使用該函數的名稱，因為您可能不想覆蓋任何現有的方法或屬性。

Answer 4

是你想要的嗎

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

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

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

    </script>

Answer 5

給定

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

看起來您想使用this關鍵字來具有功能

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

而且，與其設置屬性，不如設置element.myFunction(); ，我建議使用Function.prototype.call或Function.prototype.apply ，即

myFunction.call(element); // element gets logged

Answer 6

相反，您應該嘗試一下，我將通過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>

在函數中獲取元素

問題描述

6 個解決方案

解決方案1
0

解決方案2
0 2013-10-06 13:54:34

解決方案3
0 已采納 2013-10-06 13:59:07

解決方案4
0 2013-10-06 13:59:47

解決方案5
0 2013-10-06 14:04:36

解決方案6
-1 2013-10-06 13:46:24

在函數中獲取元素

問題描述

6 個解決方案

解決方案1 0

解決方案2 0 2013-10-06 13:54:34

解決方案3 0 已采納 2013-10-06 13:59:07

解決方案4 0 2013-10-06 13:59:47

解決方案5 0 2013-10-06 14:04:36

解決方案6 -1 2013-10-06 13:46:24

解決方案1
0

解決方案2
0 2013-10-06 13:54:34

解決方案3
0 已采納 2013-10-06 13:59:07

解決方案4
0 2013-10-06 13:59:47

解決方案5
0 2013-10-06 14:04:36

解決方案6
-1 2013-10-06 13:46:24