重置IE下CSS的值

做响应式设计时，经常需要覆盖和重置CSS样式，initial 是最符合语义的值，但是IE下全系列都不支持的。

如果是CSS，需根据情况使用 auto, 0, 1px 来代替。

<style>
  .example {
    width: 200px;
    background: green;
    margin-bottom: 10px;
  }

  .reset-example {
    width: auto;
  }
</style>

<p class="example">这是一段文本</p>

<button id="trigger">重置文本宽度</button>

<script>
  var trigger = document.getElementById('trigger');
  trigger.addEventListener('click', function () {
    document.querySelector('.example').className = 'example reset-example';
  });
</script>

尝试一下 »

如果是JS，可将属性值设为空来还原样式。

<span class="selector" style="display:none">这是隐藏的元素</span>
<button id="trigger">显示隐藏元素</button>

<script>
  var trigger = document.getElementById('trigger');
  trigger.addEventListener('click', function () {
    document.querySelector('.selector').style.display = '';
  });
</script>

尝试一下 »

相关链接