0

我做了： 

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

现在我想做：

 element.myFunction();

但我不知道如何在函数中获取元素。我该怎么做呢？

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

6 回答 6

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， or 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 演示，使用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 小提琴演示。

于 2013-10-06T13:54:34.093 回答
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`)
}

而不是设置一个属性，所以你可以element.myFunction();，我建议使用Function.prototype.callor Function.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 回答