Question

我使用jQuery构建了一个图像滑块，并认为在vanilla javascript（这是一个很棒的框架btw;）中做同样的事情是一个很好的练习。很高兴知道虽然我可以使用jQuery构建东西，但我很少理解它实际上是在做什么。

无论如何，这是我的问题。我试图设置我附加到列表元素的图像的宽度。出于某种原因，我编写的代码不会影响图像的width属性。我更新了CSS作为一个完整性检查，它工作正常，所以它一定是js的问题。

以下是代码：

console.log('Yeh, bitch!  Programming!');

function slider() {
var settings = {
    width: "700px"
}; // end settings object

var sliderImages = document.getElementById('slider-images').querySelectorAll('img'),
    prevImg = document.getElementById('prev-img'),
    currentImg = document.getElementById('current-img'),
    nextImg = document.getElementById('next-img'),
    wrapperInner = document.getElementById('img-wrapper-inner'),
    imgList = [],
    imgAttr;

for (var i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
};
function grabImages() {
    var DOM_img;
    for (var i = 0; i < sliderImages.length; i++) {
        imgSrc = sliderImages[i].getAttribute('src');

        DOM_img = document.createElement('img');
        DOM_img.src = imgSrc;
        imgList.push(DOM_img);
        console.log(imgList[i]);
    }; // end for

    prevImg.appendChild(imgList[imgList.length -1]);
    currentImg.appendChild(imgList[0]);
    nextImg.appendChild(imgList[1]);

}; // end grabImages
grabImages();

var visibleImages = wrapperInner.querySelectorAll('ul li img');
visibleImages.style = 'width: ' + settings.width;

};// end slider
slider();

如果您需要css和html，请告诉我。我只是想尽量不发布帖子。

Answer 1

querySelectorAll会返回NodeList个集合，该集合没有style属性。

如果要更改该集合中每个元素的样式，则必须迭代它。

例如，使用[].forEach：

[].forEach.call(visibleImages, function(element) {
  element.style.width = settings.width;
});

注意为style属性分配内容是一种不好的做法。在某些浏览器上style实现为具有getter但没有setter的访问器属性，因此在非严格模式下将忽略对其的赋值或以严格模式抛出。在其他浏览器上，它将替换所有内联样式。相反，更好地分配给style.width。或者，如果您真的想要摆脱以前的内联样式，请style.cssText。

Answer 2

你的问题在这里：

var visibleImages = wrapperInner.querySelectorAll('ul li img');
visibleImages.style = 'width: ' + settings.width;

您正在尝试设置NodeList的样式属性，但由于它是一个列表，因此您无法设置属性！

将其更改为：

var visibleImages = wrapperInner.querySelectorAll('ul li img');
for (var i = 0; i < visibleImages.length; i++)
    visibleImages[i].style = 'width: ' + settings.width;

为了遍历visableImages并设置所有样式。

将宽度设置为附加的子图像 - VANILLA javascript

2 个答案: