删除课程后元素消失

Question

当从具有非常特定配置的元素中删除类时，我在Chrome 60.0中遇到了一些奇怪的行为。

我从<h1>元素中删除了fade类，它使它完全消失。 通过删除dev-tools元素检查器中的类可以重现该问题。 谁能告诉我这里发生了什么？

单击按钮后，该元素应该恢复到完全不透明度。

 var button = document.querySelector('button'); var h1 = document.querySelector('h1'); button.addEventListener('click', function(){ h1.classList.remove('fade'); }); 

 .center { overflow: hidden; } h1 { float: left; overflow: hidden; } .fade { opacity: .2; } 

 <div class="center"> <div> <h1 class="fade">Watch me disappear</h1> </div> </div> <button>Click</button> 

Answer 1

删除溢出：为h1定义的隐藏属性将解决您的问题。

 var button = document.querySelector('button'); var h1 = document.querySelector('h1'); button.addEventListener('click', function() { h1.classList.remove('fade'); }); 

 .center { overflow: hidden; } h1 { float: left; } .fade { opacity: .2; } 

 <div class="center"> <div> <h1 class="fade">Watch me disappear</h1> </div> </div> <button>Click</button>