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
}

使用此方法this，在myFunction()方法中，将引用由以下内容选择的元素：

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

JS Fiddle demo，使用HTMLElement原型。

JS Fiddle demo，使用Node原型。

同样，如果你想要做的就是将元素节点传递给函数而不用明确地＆＃39;把它作为一个论点传递：

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

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

JS Fiddle demo

如果您希望对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 Fiddle demo

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`)
}

我建议使用Function.prototype.call或Function.prototype.apply，而不是设置属性element.myFunction();，

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 个答案: