时间戳

首页 > 解决方案 > 为什么没有 a 而不是一个？

javascript - 为什么没有 a 而不是一个？

问题描述

我使用 JS 生成一个包含事物列表的侧边栏。问题是侧边栏只能在没有<!DOCTYPE html>. 有一个，它需要元素列表的高度，如果没有一个，它需要身体的高度（这是我想要的）。这是代码（带<!DOCTYPE html>）：

<!DOCTYPE html>
<html>
  <head>
    <title>Why does this work without a doctype and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>With &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

这是没有的代码<!DOCTYPE html>：

<!--DOCTYPE html-->
<html>
  <head>
    <title>Why does this work without a doctype and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>Without &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

（旁注：实际上，它没有一个名为 的固定数组parts。在实际版本中，它使用 AJAX 请求来获取它。）

您可能会注意到，这两个片段之间只有两个区别：

  1. 第二个有 doctype 注释

  2. 第二个说without而不是with

看起来它没有显示 Stack Overflow 代码片段中的差异，但如果您复制代码并将其放在其他地方（例如设备上的 HTML 文件），它将无法正常工作。

这是复制并粘贴到您自己的文件中的代码：

<!DOCTYPE html> <!-- Remember to comment/uncomment to change it! -->
<html>
  <head>
    <title>Why does this work without a <!DOCTYPE html> and not with one?</title>
    <meta charset="UTF-8"/>
    <style>
        body{margin: 0; overflow-y: hidden; background-color: #aaaaaa}
        .sidebar{width :18%; height: 100%; background-color: #333333;}
        .lesson{background-color: #2fbfc0; padding: 5px; border-bottom: 2px solid #111111; font-size: 20px;}
    </style>
  </head>
  <body>
    <p>With/Without &lt;!DOCTYPE html&gt;</p>
    <script>
        var sidebar=document.createElement("div");
        document.body.appendChild(sidebar);
        sidebar.className="sidebar";
        var parts="Intro\\index.html\nFirst\\first.html\nSecond\\second.html".split("\n");
        var len=parts.length;
        var i;
        for(i=0;i<len;i++){
            var section=document.createElement("div");
            var segments=parts[i].split("\\");
            segments[1]=segments[1].trim();
            section.innerHTML=segments[0];
            section.id=segments[1];
            section.onclick=function(){location.assign(this.id);}
            section.className="lesson";
            if(segments[1]==(location.href.slice(-1)=="/"?location.href+"index.html":location.href).split("/").slice(-1)[0])
                section.style.color="#3f5890";
            sidebar.appendChild(section);
        }
        sidebar.childNodes[0].style.borderTop="2px solid #111111";
    </script>
  </body>
</html>

所以我的问题是，它为什么要这样做？对我来说，它似乎应该是相反的（使用 doctype应该让它工作，而不应该让它工作）。

标签： javascripthtmlcssdoctype

解决方案

推荐阅读