将 getElementById 更改为 getElementsByClassName答案

【问题标题】：Changing getElementById to getElementsByClassName将 getElementById 更改为 getElementsByClassName
【发布时间】：2013-12-16 19:41:06
【问题描述】：

我确定这是 JS 中的一个常见问题，我使用 JS 创建了调整大小的功能，最初这个功能只用于我网站的一个项目，但是现在我选择在多个项目上使用它。我的 JS 函数当前使用document.getElementById(id);，但是我想更改它，以便它查找类名.resize。如何才能做到这一点？下面是我的 JS 的 sn-p

function ebi(id){
        return document.getElementById(id);
    }
    if(ebi('resize')
        .complete==true){
        iscale(ebi(''));
    } 
    ebi('resize')
    .onload=function(){iscale(this);
    }

    function iscale(o){
        //alert(o.width);
    var sar=o.width/o.height;
    var tar=1,tiw,tih,xoff,yoff;
    if(o.width<=425&&o.height<=467){
        tiw=o.width;
        tih=o.height;
    }else if(tar>sar){
        tiw=425*sar;
        tih=467;
    }
    else{
        tiw=425;
        tih=467/sar;
    }
    xoff=(680-tiw)>>1;
    yoff=(209-tih)>>1;
    //alert(xoff);
    o.width=tiw;o.height=tih;
    o.style.top=yoff+"px";
    o.style.left=xoff+"px";
    }
function $(id){return document.getElementById(id);}

html

 <section id="homeSlide" class="shadow">
    <img id="resize"class='opaque' src="http://www.colette.fr/media/push/pony_01239.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/EGIFT_01234.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/swa_mmm_001255.jpg" />
</section>

目前，调整大小功能仅适用于第一张图像，但其他图像不调整大小。在有人攻击我有关网络标准的问题之前，img 标签中的id 只是为了测试功能。

【问题讨论】：

你试过 document.getElementsByClassName 吗？将您所有的 img id 更改为 class 并尝试
@Gowsikan yup 试过了，但是我得到了一个错误，我认为就像我自己一样简单

标签： javascript html

【解决方案1】：

id 必须是唯一的，这就是为什么这不起作用。

您可以使用document.getElementsByClassName()（如您所想）：只需添加class="resize"（而不是id="resize"）并使用这种循环：

function callResize()
{ 
  var elements = document.getElementsByClassName("resize");
  for (var i=0;i<elements.length;i++)
  {
    var element = elements[i];
    // do things with element
    iscale(element);
  }
}
document.getElementById('homeSlide').onload = function(){callResize();}

【讨论】：

这里有点困惑，我的 JS 如下所示，这给了我一条错误消息...jsfiddle.net/newkidontheblock/QFK6Y
你不需要声明函数 $(id) 也不需要 ebi。让我编辑我的答案
嘿伙计，我很难让它工作，你能把它上传到 jsfiddle
在您提供的链接上，getElemntsByClassName 而不是 getElementsByClassName。 + 在 jsfiddle 中，您必须分别放置 html、js 和 css：html 是空的，并且 js 部分中有

【解决方案2】：

重点是id 应该是独一无二的，并且做你想做的事为什么不使用jQuery。使用 jQuery，你可以轻松地做你想做的事，使用这个

jQuery("#homeSlide>img")

你也可以添加这个：

jQuery("#homeSlide>img").each(function(imgNode){
    resize(imgNode);
});

但如果你想在没有jQuery 的情况下这样做，就getElementsByClassName 和getElementsByTagName 这样的一些功能不是跨浏览器的，你最好试试这个：

var homeSlide = document.getElementById('homeSlide');
var myImgNodes = [];
for(var i=0;i<homeSlide.childNodes.length;i++){
    var childNode = homeSlide.childNodes[i];
    if(childNode.nodeType==1 && childNode.tagName.toLowerCase()=="img"){
        myImgNodes.push(childNode);
    }
}

之后myImgNodes 正是你想要的。

我刚刚更改了您的小提琴示例并尝试不更改您的功能，您可以检查一下，它非常有效。 This is your updated jsfiddle DEMO

【讨论】：

因此我在我的问题中说“在有人攻击我之前，img 标签中的 id 只是为了测试功能。”
我不是故意要攻击你的，因为我已经完成了这个非常艰巨的任务，我只是想为你节省一点时间，无论如何对不起。玩得开心。
谢谢你的帮助
我只是在我的答案中添加了一个DEMO 并删除了那些坏行。

【解决方案3】：

首先，您的 HTML 文档中的 ID 必须是唯一的。但是在您的示例代码中，您将 ID“resize”分配了三次。只需替换所有三个元素的 ID 并添加 class="resize"。

其次，我建议使用jQuery.each() 方法来迭代返回的集合而不是循环。

例子：

var elements = document.getElementsByClassName("resize")

jQuery.each(elements, function(element) {
  iscale(element)
})

【讨论】：