Javascript 获取函数中的元素_Javascript_Function_Element

Javascript 获取函数中的元素

javascript function

Javascript 获取函数中的元素,javascript,function,element,Javascript,Function,Element,我做到了： var element = document.getElementById('myelement'); 现在我想做： element.myFunction(); 但是我不知道如何在函数中获取元素。我该怎么做 function myFunction() { // Get element here? } 我将给出一个带有onclick的div示例，而您应该尝试这个方法 <script> function myfunc(){ getElementById('sampl

我做到了：

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

现在我想做：

 element.myFunction();

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

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

我将给出一个带有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>

在javascript中，因为您正在声明

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

您已经在全局范围中拥有了元素，因此您可以在函数中简单地调用它

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

编辑：如果要在另一个函数中声明元素，或者要对不同的元素使用同一个函数，则必须使用参数。这是电话：

myFunction(element)

这就是函数

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

如果要将函数与元素链接，则需要扩展HTMLElement或节点对象的原型：

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

或：

使用这种方法，在myFunction方法中，将引用由以下人员选择的元素：

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

，使用HtmleElement原型

，使用节点原型

类似地，如果您只想将元素节点传递给函数，而不将其作为参数“显式”传递：

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

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

如果您希望对由getElementsByTagName、getElementsByClassName或querySelectorAll等选择的多个元素执行操作，则需要扩展节点列表原型，例如：

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);

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'

您可以向HTMLElement对象的原型添加自定义函数，如下所示：

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

这意味着任何元素都可以作为方法访问customFunc函数。例如：

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);

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'

显然，在命名函数时要小心，因为您可能不想覆盖任何预先存在的方法或属性。

这是您想要的吗

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

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

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

    </script>

给定

看起来您希望使用关键字创建一个函数

而不是设置一个属性以便可以使用element.myFunction；，我建议使用or，即

您需要使用参数。为什么要使用element.myFunction？你想完成什么？你的问题没有多大意义。@Pointy我认为它看起来比myFunctionelement更干净，我在其他javascript函数中也看到了它。@user2252246这两种结构的含义不同。@Pointy我正在使用函数来更改元素，这个函数的思想是，我可以对不同的元素再次使用相同的代码。将其用作参数并不表明我编辑/更改了元素。是的，请参阅对我的回复的编辑。如果您将元素作为函数本身的参数传递，您可以使用它。我这样做了，但感觉好像没有明确说明我编辑/更改了元素。看起来代码不好/不清楚。而element.myFunction清楚地显示了我在做什么。我又搜索了一点，发现我需要添加一个方法，但我不确定这是否可行。谢谢！我使用了这个解决方案。我只创建了自己的名为“Element”的函数，而没有使用HtmleElement。这样我就不必小心，我完全可以控制。使用了一点MDN：这就是我想要的！我把它改了一点，见上面的答案。谢谢

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

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