Как применить функцию JS к нескольким элементам HTML с помощью ключевого слова this?

Question

Я новичок ie на JS и пока не понимаю, как использовать ключевое слово this.

Вот простой html, и я хочу, например , элементы div и p, чтобы получить зеленую границу onmouseover с помощью функции JS, используя ключевое слово this или что-то еще, чтобы функция работала с обоими элементами или, возможно, с любым элементом html.

<div id="firstDiv" onmouseover="greenBorder()">
   <h1>I'm Bruce</h1>
</div>

<p id="firstP" onmouseover="greenBorder()"> I'm Batman </p>

И я знаю, что это неверно, но мой код JS будет примерно таким:

function greenBorder(){
  this.style.border="1px solid green";

Спасибо

Answer 1

this устанавливается при вызове функции. В этом случае ваш встроенный код вызывается как функция с this, установленным для элемента, но когда вы вызываете greenBorder, его this не устанавливается.

(Если вы вызывали свойство например, myObject.myMethod(), то вместо this будет установлен объект myObject. В противном случае это будет window или, если ваш код JavaScript работает в строгом режиме, undefined.)

Вы можете явно указать его this, используя метод .call:

<p id="firstP" onmouseover="greenBorder.call(this)"> I'm Batman </p>

... таким образом, опубликованный вами код будет работать как есть :

function greenBorder () {
  this.style.border = "1px solid green"
}

Или вы можете передать элемент в качестве аргумента:

<p id="firstP" onmouseover="greenBorder(this)"> I'm Batman </p>

В последнем случае вам придется изменить свою функцию, чтобы использовать аргумент вместо this:

function greenBorder (element) {
  element.style.border = "1px solid green"
}