JSのクラスにIDを変更

Question

私のサイトで写真を見るには、いくつかのjavascriptが必要です。 しかし、私はすべてのサイトでもっと多くの写真を見たいと思っています。 - そのために、IDをクラスに変更する必要があります。 これは可能ですか？

のJavaScript

function toggle(div_id) { 
var el = document.getElementById(div_id); 
if (el.style.display == 'none') { el.style.display = 'block';} 
else {el.style.display = 'none';} 

}

function blanket_size(popUpDivVar) { 
if (typeof window.innerWidth != 'undefined') { 
    viewportheight = window.innerHeight; 
} else { 
    viewportheight = document.documentElement.clientHeight; 
} 
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { 
    blanket_height = viewportheight; 
} else { 
    if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { 
     blanket_height = document.body.parentNode.clientHeight; 
    } else { 
     blanket_height = document.body.parentNode.scrollHeight; 
    } 
} 

var blanket = document.getElementById('blanket'); 
blanket.style.height = blanket_height + 'px'; 
var popUpDiv = document.getElementById(popUpDivVar); 
popUpDiv_height=blanket_height/2-150;//150 is half popup's height 
popUpDiv.style.top = popUpDiv_height + 'px'; 

}

function window_pos(popUpDivVar) { 
if (typeof window.innerWidth != 'undefined') { 
    viewportwidth = window.innerHeight; 
} else { 
    viewportwidth = document.documentElement.clientHeight; 
} 
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { 
    window_width = viewportwidth; 
} else { 
    if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { 
     window_width = document.body.parentNode.clientWidth; 
    } else { 
     window_width = document.body.parentNode.scrollWidth; 
    } 
} 
var popUpDiv = document.getElementById(popUpDivVar); 
window_width=window_width/2-150;//150 is half popup's width 
popUpDiv.style.left = window_width + 'px'; 

}

function popup(windowname) { 
blanket_size(windowname); 
window_pos(windowname); 
toggle('blanket'); 
toggle(windowname);  

}

CSS

#blanket { 
background-color:#111; 
opacity: 0.8; 
filter:alpha(opacity=65); 
position:absolute; 
z-index: 1000; 
top:0px; 
left:0px; 
width:100%; 

}

#popUpDiv { 
position:absolute; 
background-repeat:no-repeat; 
z-index: 1001; 
text-align:center; 
left:0; 
top:0; 

}

HTML

<div id="blanket" style="display:none;"></div> 
       <div id="popUpDiv" style="display:none;"> 
        <a href="Index.html" onclick="popup('popUpDiv')"> 
        <img id="imageid" src="bigPicture.png" alt="picture"/><br /></a> 
       </div> 
       <a href="#" onclick="popup('popUpDiv')" class="pic"><img src="smallPicture.png" alt="picture"/></a> 

Answer 1

基金あなたがする必要があるのは、単一の要素を取得するためにgetElementByIdが呼び出されたすべての場所を置き換えることです。getElementsByClassNameを使用してのリストを取得します。次に、あなたがやりたいことをするリストをループします。同様に、toggle関数のように、特定の要素を扱う必要があるコードの一部は、ID文字列ではなく要素オブジェクトを受け入れる必要があります。

getElementsByClassNameは、Internet Explorer 8以前の主要なブラウザでサポートされています。 IE8以前をサポートする必要がある場合は、独自の実装を提供する必要があります（「IE getElementsByClassName」を検索すると、いくつかの実装を選択できます）。冒頭では必ずしも明白ではありません知っている

特に有用なものであることをあなたが（addEventListenerを介して、またはattachEvent [IE上]コードでは、ないマークアップでonclick属性で）正しく、イベントハンドラをバインドする場合、イベントハンドラの呼び出し中にthisは、ハンドラがアタッチされた要素を参照するため、直接操作することができます（たとえば、this.style.color = "green";）。

何もありませんが、必要なAPIを学んで言語を学ぶ時間はありません。

いくつかの参照：

• DOM2 Core - ほぼ普遍
• DOM2 HTML stuffをサポート - ほぼ普遍
• DOM3 Coreをサポート - ほとんどサポートされ、古いIEのバージョンが問題
• HTML5 Common DOM Bindings
• のECMAScript（JavaScriptのです）仕様 - Official PDF | Handy HTML version - ただし、必ずしも読みやすいとは限りません。
• Mozilla's JavaScript reference pages - スペック
• Crockford on JavaScriptよりも、より読みやすい - あなたが少しクロックフォードを読み取ろうとする前に、言語を知っているまで待って、その後がを行うには、クロックフォードをお読みください。たとえあなたが彼の結論のいくつかに同意できなくても（私は確かにそうしていますが、ほとんどが現場です）、多くの良い情報がそこにあります。
• はJavaScript：デヴィッド・フラナガン（と昔ながらの紙の本）によってDefinitive Guideの
• （ああ一体何）私はまた私のanemic little blogでJavaScriptとDOM関連するものの様々なスニペットを書きます。 JavaScriptを学んでいるだけの方は、JavaScript's Curiously-Powerful OR Operator (||)とClosures are not complicatedのような最も古いエントリから始めてください。

対象とするブラウザで何かがサポートされているかどうかわからない場合は、テストしたり、http://caniuse.com/などを使用する必要があります。

---

上記の私は、ブラウザのDOMと直接対話する方法を説明するさまざまなDOM仕様にリンクしています。 DOMは偉大で強力ですが、必ずしもすべてである必要はありません便利なを使用してください。また、私が言及したように、さまざまな部分のサポートはブラウザによって異なり、いくつかのブラウザにはバグ（たとえば、IE7 and earlier get getElementById wrong）があります。これらの違いやバグを発見して回避するか、他の人が行った作業をjQuery、Prototype、YUI、Closure、またはany of several othersなどの優れたJavaScriptライブラリを使って活用することができます。それを行うと、DOMを理解することはまだ有効です。したがって、上記の参照をスキップすることはありませんが、代わりにそのライブラリのAPIを使用することが多くなります。