调用函数 JS

如何解决调用函数 JS

有人能说一下如何选择和调用当前函数的元素吗？

function Myfunc() {
  element.style.padding = '16px';
}

//---

<button onclick="Myfunc()">Click Me!</button>

我问如何在不给元素提供 id 或 class 的情况下做到这一点，并且没有：

function Myfunc(this) { }

解决方法

你可以显式地将元素作为函数的参数传递，你可以引用 event 对象，或者你可以内联代码（最后一个不是一个好的选择，但它仍然有效）：

function clickFunc1(element) {
  element.style.padding = '16px'
}

function clickFunc2() {
  event.target.style.padding = '16px'
}

<button onclick="clickFunc1(this)">ClickMe 1</button>
<button onclick="clickFunc2()">ClickMe 2</button>
<button onclick="this.style.padding = '16px'">ClickMe 3</button>

,

使用this.style.padding：

function Myfunc(element) {
  element.style.padding = '16px';
}

<button onclick="Myfunc(this)">Click Me!</button>
<button onclick="Myfunc(this)">Click Me 2!</button>
<button onclick="this.style.padding = '16px'">Click Me Without function!</button>

,

你可以这样使用它：

function Myfunc(element) {
element.style.padding = '16px';
}

<button onclick="Myfunc(this)">Click Me!</button>

,

方法一

function foo(target){
  target.style.padding = '16px';
}

<button onclick="foo(this)">Click me!</button>

方法 2（更好）

document.querySelector("button").addEventListener("click",function(event){
  const element = event.target;
  element.style.padding  = '16px';
});

<button>Click me!</button>

,

您可以选择event。

<button onclick="Myfunc(event)">Click Me!</button>

那么 e.target 是您点击的元素。

function Myfunc(e) {
  e.target.style.padding = '16px';
}

JSFiddle