设置宽度附加的儿童图像-香草javascript

Setting Width to Appended Child Image - VANILLA javascript

本文关键字：图像 香草 javascript 设置      更新时间：2023-09-26

我用jQuery构建了一个图像滑块，并认为在香草javascript(这是一个很棒的框架;)中做同样的事情会是一个很好的练习。很高兴知道，虽然我可以用jQuery构建东西，但我对底层实际发生的事情了解甚少。

无论如何，这是我的问题。我试图设置我已添加到列表元素的图像的宽度。由于某种原因，我所写的代码不影响图像的宽度属性。我更新了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。我只是不想把文章写得太长。

querySelectorAll返回一个没有style属性的NodeList集合。

如果你想改变集合中每个元素的样式，你必须迭代它。

例如，使用[].forEach:

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

注意，给style属性赋值是一个不好的做法。在一些浏览器上，style是作为一个带有getter但没有setter的accessor属性实现的，因此对它的赋值将在非严格模式下被忽略或在严格模式下抛出。在其他浏览器上，它将替换所有的内联样式。相反，最好分配给style.width。或者，如果你真的想摆脱以前的内联样式，到style.cssText .

你的问题在这里:

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并设置所有的样式

相关文章：