javascript - 在函数中作为参数传递时无法设置 css 样式

Question

我正在创建一个 js slider 。当我将它们作为函数内的参数传递时，我无法设置 div 样式属性。

这是我的js代码

SimpleShow.init = function (el, options) {

    self = this;
    //Selects the slider box
    self.box = document.querySelector(el);
    //Creates the array of all the items in the slider
    self.slides = document.querySelector(el + "> ul").children;
    //Creates the options
    self.options = mergeOptions(options, DEFAULTS);
    self.boxInfo = {
        heightBox: self.box.offsetHeight,
        widthBox: self.box.offsetWidth,
        totalWidth: self.box.offsetWidth * self.slides.length
    }

    initBox(self.box, self.slides, self.boxInfo);
}

//Responsible for setting the box
function initBox(box, slides, info){
    //This code is working
    box.style.overflow = "hidden";

    //-----------------This part is causing me problems-------------
    //Following two lines below are returning undefined on js console.---
    box.children.style.width = info.totalWidth + 'px';
    //Sets all the slides on the same line
    for(let i = 0; i < slides.length;i++){
        slides.style.float = "left";
    }
}

这是我的 HTML 代码:-

<div id="gallery">
        <ul>
            <li class="box1"></li>
            <li class="box2"></li>
            <li class="box3"></li>
            <li class="box4"></li>
        </ul>
    </div>

Answer 1

我相信确实有一个错误，您忘记了正确的迭代:

您的代码:

for(let i = 0; i < slides.length;i++){
        slides.style.float = "left";
    }

更正:

for(let i = 0; i < slides.length;i++){
        slides[i].style.float = "left";
    }

如果您没有看到它，请在“幻灯片”之后添加 [i]。