javascript - Using document.querySelector('.').style. to change *two* CSS properties of a different div

Question

In follow-up to an earlier question. I have the following script:

 document.querySelector('.clickme').addEventListener('click', function() {
     this.style.color = '#f00';
     this.style.backgroundColor = '#fff';
 });

...which means when the div .clickme is clicked/tapped, the script changes .clickme's own color and backgroundColor properties. Now, instead, I need the script to change not .clickme's own properties, but the color and backgroundColor of another element on the page, a div class (let's call it) .zebra. How should the script be modified to achieve that? (The target of the click/tap would still be .clickme.)

Answer 1

You can use document.querySelector('.zebra') inside click event handler

document.querySelector('.clickme').addEventListener('click', function() {
     this.style.color = '#f00';
     this.style.backgroundColor = '#fff';
     document.querySelector('.zebra').style.color = 'blue';
     document.querySelector('.zebra').style.backgroundColor = 'grey';
 });

document.querySelector('.clickme').addEventListener('click', function() {
     this.style.color = '#f00';
     this.style.backgroundColor = '#fff';
     document.querySelector('.zebra').style.color = 'blue';
     document.querySelector('.zebra').style.backgroundColor = 'grey';
 });

<div class='clickme'>Click me</div>
<div class='zebra'>Zebra</div>