问题描述
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';
}