javascript - "Sections"添加新的 div 时变满

Question

我一直在尝试通过调用函数的能力来简化事情，而不必使用不同的 JS 文件。所以我所做的是将文件合并为一个文件，并将每个文件单独包装在一个函数中。然后您可以使用 function() 简单地调用它们而不是在文件之间交换。我的前两个效果效果很好，但是在包装第 3 部分时我得到了

Uncaught TypeError: Cannot read property 'style' of null `

所以通过更多的调查，我发现我没有 <div class="colors"></div>在 HTML 文件中。所以我然后做的是在使用 document.getElementsByClassName('top').innerHTML = '<div class="colors"></div>'; 调用函数时添加它.不幸的是，由于某种原因这不起作用。现在，当页面加载时，所有部分都会加载。这是我的 JS:

function sections(){
function cback(e) {
var t = [];
for (var n = inputs.length; n--;) {
    if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
var i = inputs.length;
var s = document.querySelectorAll(".top");
for (var o = s.length; o--;) {
    s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),
inputs = [];
for (var i = forms.length; i--;) {
var els = forms[i].querySelectorAll("input, textarea, select");
for (var j = els.length; j--;) {
    if (els[j].type != "button" && els[j].type != "submit") {
        inputs.push(els[j]);
        els[j].addEventListener("input", cback, false);
    }
}
}

function generateCSSGradient(colours) {
var l = colours.length, i;
for( i=0; i<l; i++) colours[i] = colours[i].join(" ");
return "linear-gradient( to right, "+colours.join(", ")+")";
}

var cols = [
["#1ABC9C","0%"],
["#1ABC9C","33.3%"],
["#EC7063","33.3%"], // note same percentage - this gives a crisp change
["#EC7063","66.6%"],
["#3498DB","66.6%"],
["#3498DB","100%"]
];
document.querySelector(".colors").style.background = generateCSSGradient(cols);
document.getElementsByClassName('top').innerHTML = '<div class="colors"></div>';
var window_width = window.innerWidth + "px";
document.querySelector(".colors").style.width = window_width;

};

我添加了这个额外的 CSS 来处理宽度和高度

.colors{
width: 100%;
height: 4px;
}

我不太确定为什么会这样。 Here's该问题的演示，以及 here's我的实际工作演示之一，但它是文件方式，而不是功能。任何帮助将非常感激。

Answer 1

您的渐变是包含在另一个 div 中的 div ，内部的保持颜色，外部的限制宽度；您动态调整宽度，但实际上您的两个版本之间存在细微差别，这与您发布的代码无关;-)

.top {
  overflow: hidden;
}

这是唯一的原因，为什么你的彩条从一开始就可见。将它添加到您的新版本中，您应该没问题。