将ID更改为JS中的类别

Question

Ive loant 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

基金amentally，你需要做的是取代所有的地方getElementById被调用来获取单个元素，并使用getElementsByClassName获取列表的元素。然后循环执行你想做的事情。同样，需要使用一个特定元素（如toggle函数）的部分代码需要接受元素对象而不是ID字符串。

请注意，getElementsByClassName受Internet Explorer 8及更早版本以外的所有主流浏览器的支持;如果你需要支持IE8和更早的版本，你需要提供自己的实现（如果你搜索“IE getElementsByClassName”，你会发现很多实现可供选择）。知道

一种特别有用的事情，其不一定是显而易见的在开始时是，当你（通过addEventListener或[上IE] attachEvent在代码;未在标记的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权威指南 David Flanagan着的（和老式纸书）
• （哦，究竟发生了什么），我也写了的JavaScript和DOM相关的东西，不同的片段在我anemic little blog。如果您只是学习JavaScript，请从最早的条目开始，例如JavaScript's Curiously-Powerful OR Operator (||)和Closures are not complicated，然后继续前进。

如果你不确定你要定位的浏览器（S）的东西是否支持，你必须对它进行测试和/或使用使用http://caniuse.com/或相似。

---

上面我已经链接到各种DOM规范，告诉你如何直接与浏览器的DOM对话。 DOM很棒，功能强大，但不一定都是方便使用。另外，正如我所提到的，它的各个部分的支持因浏览器而异，甚至在某些浏览器中也存在错误（例如，IE7 and earlier get getElementById wrong）。您可以发现并解决所有这些差异和错误，也可以利用其他人通过使用像jQuery，Prototype，YUI，Closure或这样的好JavaScript库完成的工作。如果你这样做，理解DOM仍然有用，所以我不会忽略上面的参考文献，但是很多时候你会使用该库的API。