Pure JavaScript equivalent of JQuery $(this)

Question

I am giving a simple example of jQuery code below:

$(".black").on("click", function() {
    $(this).css("color", "red");
});

When an element with 'black' css class is clicked, the particular element's (this) color turns to red.

Now, how the above code can be written in pure JavaScript? Please tell me the JavaScript equivalent of Jquery $(this) when it is used against a class selector.

Answer 1

var blacks = document.getElementsByClassName('black');

for(var i =0; i< blacks.length; i++){
    blacks[i].onclick = function(){ 
        this.style.color = 'red';
    }
}

  var blacks = document.getElementsByClassName('black'); for(var i =0; i< blacks.length; i++){ blacks[i].onclick = function(){ this.style.color = 'red'; } } 

 <div class="black">test</div> <div class="black">test</div> <div class="black">test</div> 

Answer 2

There is no pure javascript equivalent of $(this) as $() returns a jQuery object.... instead you have to use pure javascript constructs to do the same like

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

var els = document.getElementsByClassName('');
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', handler, false)
}

 function handler() { this.style.color = 'red'; } var els = document.getElementsByClassName('black'); for (var i = 0; i < els.length; i++) { els[i].addEventListener('click', handler, false) } 

 <div class="black">1</div> <div class="black">2</div> <div class="black">3</div> <div class="black">4</div> <div class="black">5</div> 

Answer 3

您可以像这样设置css属性：

this.style.color = "red";

Answer 4

Shorter version

[].forEach.call(document.querySelectorAll('.black'), function(el) {
    el.addEventListener('click', function() {
        el.style.color="red";
    })
})