Einstellung der Breite zu angehängt Kind Bild - VANILLA Javascript

Question

Ich baute einen Bild-Slider mit jQuery und dachte, es wäre eine gute Übung, um das gleiche in Vanille Javascript (Was ist ein tolles Framework BTW;)). Es ist gut zu wissen, dass ich, obwohl ich Dinge mit jQuery bauen kann, wenig Ahnung davon habe, was eigentlich unter der Haube passiert.

Wie auch immer, hier ist mein Problem. Ich versuche, die Breite eines Bildes, das ich an ein Listenelement angehängt hatte, festzulegen. Aus irgendeinem Grund beeinflusst der Code, den ich geschrieben habe, die Eigenschaft width des Bildes nicht. Ich aktualisierte die CSS als eine Überprüfung der Gesundheit und es hat gut funktioniert, so dass es ein Problem mit der js sein muss. Hier

ist der Code:

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(); 

Lassen Sie mich wissen, wenn Sie die CSS und HTML benötigen. Ich versuche nur, die Post nicht zu lange zu machen.

Answer 1

querySelectorAll gibt eine NodeList Sammlung zurück, die keine style Eigenschaft hat.

Wenn Sie den Stil jedes Elements in dieser Sammlung ändern möchten, müssen Sie es iterieren.

Zum Beispiel mit [].forEach:

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

Hinweis etwas zur style Eigenschaft zuweisen ist eine schlechte Praxis. Bei einigen Browsern wurde style als Accessor-Eigenschaft mit einem Getter, aber keinem Setter implementiert. Daher wird die Zuweisung zu diesem Objekt im nicht strikten Modus ignoriert oder im Strict-Modus ausgelöst. In anderen Browsern ersetzt es alle Inline-Stile. Stattdessen besser auf style.width zuweisen. Oder, wenn Sie frühere Inline-Stile wirklich loswerden möchten, gehen Sie an style.cssText.

Answer 2

Ihr Problem ist hier:

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

Sie versuchen die Stil-Eigenschaft eines NodeList zu setzen, aber da es sich um eine Liste, Sie eine Eigenschaft nicht festlegen!

Ändern Sie es an:

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

Um durch visableImages und setzen alle ihre Stile iterieren.