调用函数 JS 的元素

Question

有人能说说如何 select 和调用当前函数的元素吗？

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

//---

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

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

function Myfunc(this) { }

Answer 1

使用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>

Answer 2

你可以这样使用它：

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

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

Answer 3

您可以明确地将元素作为函数的参数传递，您可以引用 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>

Answer 4

方法一

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>

Answer 5

你可以选择 event。

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

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

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

JSFiddle

调用函数 JS 的元素

Element that calls the function JS

javascript

element

方法一

方法 2（更好）