संलग्न बाल छवि में चौड़ाई निर्धारित करना - वैनिला जावास्क्रिप्ट

Question

मैंने jQuery के साथ एक छवि स्लाइडर बनाया और सोचा कि यह वेनिला जावास्क्रिप्ट (जो एक अद्भुत फ्रेमवर्क बीटीडब्ल्यू है) में ऐसा करने के लिए एक अच्छा अभ्यास होगा)। यह जानना अच्छा है कि हालांकि मैं jQuery के साथ चीजें बना सकता हूं, मुझे हुड के नीचे वास्तव में क्या चल रहा है, इसकी बहुत कम समझ है।

वैसे भी, मेरी समस्या है। मैं एक छवि की चौड़ाई निर्धारित करने की कोशिश कर रहा हूं जिसे मैंने सूची तत्व में जोड़ा था। किसी कारण से, मैंने जो कोड लिखा है वह छवि की चौड़ाई संपत्ति को प्रभावित नहीं कर रहा है। मैंने सीएसएस को एक सैनिटी चेक के रूप में अपडेट किया और यह ठीक काम किया, इसलिए यह जेएस के साथ एक मुद्दा होना चाहिए।

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

यदि आप सीएसएस और एचटीएमएल जरूरत है मुझे जानते हैं:

यहाँ कोड है। मैं सिर्फ पोस्ट को बहुत लंबा बनाने की कोशिश नहीं कर रहा हूं।

Answer 1

querySelectorAllNodeList संग्रह देता है, जिसमें style संपत्ति नहीं है।

यदि आप उस संग्रह में प्रत्येक तत्व की शैली को बदलना चाहते हैं, तो आपको इसे फिर से शुरू करना होगा।

उदाहरण के लिए, [].forEach साथ:

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

नोट style संपत्ति के लिए कुछ बताए एक बुरी बात है। कुछ ब्राउज़रों पर style को गेटर के साथ एक्सेसर प्रॉपर्टी के रूप में कार्यान्वित किया गया है लेकिन कोई सेटर नहीं है, इसलिए इसे असाइन करने से गैर-सख्त मोड में अनदेखा किया जाएगा या सख्त मोड में फेंक दिया जाएगा। अन्य ब्राउज़रों पर, यह सभी इनलाइन शैलियों को प्रतिस्थापित करेगा। इसके बजाय, 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; 

आदेश में:

को बदलें यह।