Impostazione larghezza immagine bambino aggiunto - VANILLA javascript

Question

Ho creato un dispositivo di scorrimento immagine con jQuery e ho pensato che sarebbe stato un buon esercizio fare lo stesso con vanilla javascript (che è un fantastico framework btw;)). È bello sapere che sebbene io possa costruire cose con jQuery, ho ben poca comprensione di ciò che sta realmente accadendo sotto il cofano.

Comunque, ecco il mio problema. Sto cercando di impostare la larghezza di un'immagine che ho aggiunto ad un elemento di elenco. Per qualche ragione, il codice che ho scritto non sta influenzando la proprietà width dell'immagine. Ho aggiornato il css come controllo di integrità e ha funzionato correttamente, quindi deve essere un problema con il js.

Ecco il codice:

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

fatemi sapere se avete bisogno di CSS e HTML. Sto solo cercando di non rendere il post troppo lungo.

Answer 1

querySelectorAll restituisce una raccolta NodeList, che non ha la proprietà style.

Se si desidera modificare lo stile di ogni elemento di quella raccolta, è necessario eseguirne l'iterazione.

Ad esempio, con [].forEach:

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

Nota assegnando qualcosa alla proprietà style è una cattiva pratica. Su alcuni browser style viene implementato come proprietà accessor con un getter ma nessun setter, quindi l'assegnazione ad esso verrà ignorata in modalità non rigida o in modalità strict. Sugli altri browser, sostituirà tutti gli stili in linea. Invece, meglio assegnare a style.width. Oppure, se vuoi davvero liberarti degli stili in linea precedenti, a style.cssText.

Answer 2

Il tuo problema è qui:

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

Si sta tentando di impostare la proprietà di stile di un NodeList, ma dal momento che è una lista, non è possibile impostare una proprietà!

modificarla in:

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

Al fine di un'iterazione in visableImages e impostare tutti i loro stili.