2010-07-10 15 views
6

के साथ छवि alt बदलें मेरे पास एक थंबनेल छवि है जिसे क्लिक करने पर पृष्ठ पर एक बड़ी छवि बदलती है। मेरे पास ऑनक्लिक के साथ .src को बस बदलकर काम करने वाला कोड का वह हिस्सा है। क्या ऑनक्लिक के साथ alt और शीर्षक विशेषताओं को बदलने का कोई तरीका है?जावास्क्रिप्ट ऑनक्लिक

उत्तर

7

आप सेट एट्रिब्यूट का उपयोग कर सकते हैं या सीधे संपत्ति सेट कर सकते हैं। किसी भी तरह से काम करता है, setAttribute हालांकि इसे करने का मानक डोम तरीका है।

el.onclick = function() { 
    var t = document.getElementById('blah'); 

    // first way 
    t.src = 'blah.jpg'; 
    t.title = 'new title'; 
    t.alt = 'foo'; 

    // alternate way 
    t.setAttribute('title', 'new title'); 
    t.setAttribute('alt', 'new alt'); 
    t.setAttribute('src', 'file.jpg'); 
} 
+2

दोनों तरीकों बिल्कुल मानक हैं। 'src' /' alt'/'title' को DOM स्तर 1 HTML में निर्दिष्ट किया गया है। मैं इन गुणों को 'setAttribute'' पर अनुशंसा करता हूं क्योंकि उन्हें एक्सेस करना पढ़ने के लिए बहुत स्पष्ट है, और 'getAttribute'/'setAttribute' के लिए आईई में गंभीर त्रुटियां हैं जहां डीओएम गुण HTML विशेषताओं से अलग हैं। – bobince

+0

मैं व्यक्तिगत रूप से प्रत्यक्ष संपत्ति सेटिंग की डीओएम 0 शैली का उपयोग करता हूं, और हाँ वहां बग हैं। –

+0

इस प्रश्न bobince पर अतिरिक्त स्पष्टीकरण के लिए धन्यवाद। – computersaurus

3
img.onclick = function() { 
    // old fashioned 
    img.src = "sth.jpg"; 
    img.alt = "something"; 
    img.title = "some title"; 
    // or the W3C way 
    img.setAttribute("src", "sth.jpg"); 
    img.setAttribute("alt", "something"); 
    img.setAttribute("title", "some title"); 
}​; 

नोट: कोई फर्क नहीं पड़ता है जो आप जब तक आप मानक विशेषताओं के साथ काम कर रहे एक प्रयोग कर रहे हैं।

+0

ब्राउज़र संगतता के मामले में "पुरानी शैली" और "डब्ल्यू 3 सी" वही तरीका है? – computersaurus

+1

इस सीमित मामले में हाँ, लेकिन सामान्य रूप से, आईई को 'getAttribute' /' setAttribute' के साथ कई समस्याएं हैं और इसलिए आपको ** उन तरीकों से बचने चाहिए यदि संभव हो तो। nb। कई मामलों में गुण और गुण अलग-अलग चीजें हैं! इस मामले में, '.src' जब विशेषता' src' को सेट करने के समान व्यवहार करती है, लेकिन इसे पढ़ने पर वह पूर्ण यूआरएल वापस लौटाएगा जो विशेषता इंगित कर रहा था, जो सापेक्ष यूआरएल के लिए अलग होगा। (यह उपरोक्त bugginess के कारण आईई में नहीं होगा।) – bobince

+0

@computersaurus bobince, सही है। आईई कार्यान्वयन के साथ कुछ बग हैं। जिन्हें मैं जानता हूं वह 'src/href' url relativeness,' for', 'style' और' class' है। – galambalazs

4

ठीक उसी तरह में ..

document.getElementById('main_image_id').title = 'new title' 
document.getElementById('main_image_id').alt = 'new alt' 
संबंधित मुद्दे