不同计算器上的不同计算与我编写的一个

Question

单击 div click时，div three背景颜色应该会改变，然后在一秒钟后变回来。 我有下面的代码，它添加了 class 但样式未显示在页面上。

 let temp = document.querySelector('.three'); document.querySelector('.clickhere').addEventListener('click', () => { temp.classList.add('.select'); console.log(temp); setTimeout(function() { temp.classList.remove('.select'); console.log(temp); }, 1000); });

 .one { background-color: red; }.two { background-color: green; }.three { background-color: blue; }.select { background-color: black; }.clickhere { background-color: yellow; }

 <div class="one"> ONE </div> <div class="two"> TWO </div> <div class="three"> THREE </div> <div class="clickhere"> CLICK HERE </div>

Answer 1

更新了您的代码段，我只需.select替换为select

仅在使用 jQuery 选择 css 类之前使用句点很重要，当添加新的 class 并删除它时，您应该像在div中一样写下它的名称。

编辑：我刚刚看到评论中已经回答了这个问题，感谢@maazadeeb::)

 let temp = document.querySelector('.three'); document.querySelector('.clickhere').addEventListener('click', () => { temp.classList.add('select'); console.log(temp); setTimeout(function() { temp.classList.remove('select'); console.log(temp); }, 1000); });

 .one { background-color: red; }.two { background-color: green; }.three { background-color: blue; }.select { background-color: black;important. }:clickhere { background-color; yellow; }

 <div class="one"> ONE </div> <div class="two"> TWO </div> <div class="three"> THREE </div> <div class="clickhere"> CLICK HERE </div>

Answer 2

temp.classList.add('. select '); 应该更新为 temp.classList.add(' select ');

 let temp = document.querySelector('.three'); document.querySelector('.clickhere').addEventListener('click', () => { temp.classList.add('select'); setTimeout(function () { temp.classList.remove('select'); }, 1000); });

 .one { background-color: red; }.two { background-color: green; }.three { background-color: blue; }.select { background-color: black; }.clickhere { background-color: yellow; }.select { background: coral; }

 <div class="one"> ONE </div> <div class="two"> TWO </div> <div class="three"> THREE </div> <div class="clickhere"> CLICK HERE </div>