为什么js添加的元素样式与页面加载时的不同?

Why are JS-added elements styled different from those at page load?

本文关键字：加载 添加 js 元素 样式 为什么      更新时间：2023-09-26

我有一种情况，有时元素是在页面加载时加载的，有时它们是在稍后由JavaScript生成的，没有什么特别的。然而，动态生成的元素间距在Chrome, FireFox和Safari中明显不同。

下面是一个HTML页面，其中一个元素块在页面加载时在DOM中，这些元素的精确副本在页面加载后由JavaScript添加。由于某些原因，js添加的元素(#added-late中的元素)的样式与#exists-at-page-load中的元素不同，尽管所有的样式和布局都是相同的。

问题:为什么静态生成的元素，那些在#exists-at-page-load，他们周围有额外的空间?

<!DOCTYPE html>
<html>
    <style>
      .dark-section-header {
        background-color: #222;
        margin-bottom: 5px;
      }
      .dark-section-header div {
        display: inline-block;
        height: 30px;
        width: 20px;
        margin: 0;
        margin-left: 10px;
      }
      .dark-section-header .track-menu {
        outline: 1px dashed #f00;
      }
      .dark-section-header .play-button {
        outline: 1px dashed #0f0;
      }
      .dark-section-header .star-button {
        outline: 1px dashed #77f;
      }
    </style>
  </head>
  <body>
    <div id="exists-at-page-load">
      <div class="dark-section-header">
        <div class="play-button"></div>
        <div class="track-menu"></div>
        <div class="star-button"></div>
      </div>
    </div>
    <div id="added-late"></div>
    <script>
      setTimeout(function(){
        document.getElementById( 'added-late' ).innerHTML =
          '<div class="dark-section-header">' +
            '<div class="play-button"></div>' +
            '<div class="track-menu"></div>' +
            '<div class="star-button"></div>' +
          '</div>';
      }, 0 );
    </script>
  </body>
</html>

让javascript在div之间插入空白:

setTimeout(function(){
  document.getElementById( 'added-late' ).innerHTML =
    '<div class="dark-section-header"> ' +
      '<div class="play-button"></div> ' +
      '<div class="track-menu"></div> ' +
      '<div class="star-button"></div> ' +
    '</div>';
}, 0 );

或者确保你的HTML没有:

<div id="exists-at-page-load">
    <div class="dark-section-header">
        <div class="play-button"></div><!--
     --><div class="track-menu"></div><!--
     --><div class="star-button"></div>
    </div>
</div>

这是js和spacing的所有组合

由于它们显示为内行块，因此换行导致它们具有空白

如果我将静态div改为

  <div class="play-button"></div><div class="track-menu"></div><div class="star-button"></div>

空格消失

相关文章：