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字符串。

请注意，除Internet Explorer 8及更早版本外，所有主流浏览器均支持getElementsByClassName;如果你需要支持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 - 等到你在尝试阅读Crockford之前先了解一下语言，然后做阅读Crockford。那里有很多很好的信息，即使你可能最终不同意他的一些结论（我当然也这样做，但大多数都是现实的。）
JavaScript：权威指南 David Flanagan（和老式纸质书）
（哎呀）我还在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）。您可以自己发现并解决所有这些差异和错误，也可以通过使用良好的JavaScript库（如jQuery，Prototype，YUI来利用其他人所做的工作， Closure或any of several others。如果你这样做，了解DOM仍然很有用，所以我不会跳过查看上面的参考文献，但很多时候你会使用该库的API。

在JS中将ID更改为Class

1 个答案: