追加された子イメージに幅を設定する - VANILLA javascript

Question

jQueryを使用してイメージスライダーを構築し、これをバニラの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で：styleプロパティに何かを割り当てる

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

注意が悪い習慣です。一部のブラウザでは、styleはgetterでsetterを持たないアクセサプロパティとして実装されているため、非厳密モードでは無視され、strictモードではスローされます。他のブラウザでは、すべてのインラインスタイルが置き換えられます。代わりにstyle.widthに割り当ててください。または、以前のインラインスタイルを取り除きたい場合は、style.cssTextにしてください。

Answer 2

あなたの問題はここにある：

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

あなたはNodeListのスタイルプロパティを設定しようとしているが、それはリストなので、あなたがプロパティを設定することはできません！

に変更し、それを：visableImagesを反復処理し、すべての彼らのスタイルを設定するために

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

。