javascript - 使用 document.querySelector ('.' ).style。更改不同 div 的 *两个* CSS 属性

Question

跟进 an earlier question .我有以下脚本:

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

...这意味着当单击/点击 div .clickme 时，脚本会更改 .clickme 自己的 color 和 背景颜色属性。现在，我需要的脚本不是更改 .clickme 的 自己的属性，而是更改页面上另一个元素的 color 和 backgroundColor，a div 类(我们称之为).zebra。应该如何修改脚本来实现这一点？ (点击/点击的目标仍然是 .clickme。)

Answer 1

您可以在点击事件处理程序中使用 document.querySelector('.zebra')

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>