Question

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

未捕获的TypeError：无法读取属性＆＃39; style＆＃39; null`

通过更多的调查，我发现我在HTML文件中没有<div class="colors"></div>。所以我接下来做的是在使用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;
}

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

＆＃34;第＆＃34;添加新div时会变满

1 个答案: