Javascript 将getElementById更改为GetElementsByCassName

我确信这是JS中的一个常见问题，我已经使用JS创建了调整大小的功能，最初这个功能只在我的站点的一个项目上使用，但是现在我选择在多个项目上使用它。My JS函数当前使用

document.getElementById（id）

但是我想更改它，以便它查找类名

。resize

。如何做到这一点？ 下面是我的JS的一个片段

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);}

函数ebi（id）{
返回文档.getElementById（id）；
}
如果（息税前利润（“调整大小”）
.complete==true）{
iscale（息税前利润（“”））；
} 
息税前利润（“调整大小”）
.onload=function（）{iscale（这个）；
}
函数iscale（o）{
//警报（o.width）；
var sar=o.宽度/o.高度；
var tar=1，tiw，tih，xoff，yoff；
如果（o.width>1；
yoff=（209 tih）>>1；
//警报（xoff）；
o、 宽度=tiw；o.高度=tih；
o、 style.top=yoff+“px”；
o、 style.left=xoff+“px”；
}
函数$（id）{return document.getElementById（id）；}

html

---

目前，调整大小功能仅适用于第一张图像，但其他图像不调整大小。在有人攻击我有关web标准之前，img标签中的

id

只是为了测试该功能。

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();}

函数callResize（）
{ 
var elements=document.getElementsByClassName（“resize”）；
对于（var i=0；i而言，要点是
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);
    }
}

var homeSlide=document.getElementById（'homeSlide'）；
var myImgNodes=[]；
对于（var i=0；i首先，ID在HTML文档中必须是唯一的。但是在示例代码中，您将ID“resize”指定了三次。只需替换所有三个元素中的ID并添加
class=“resize”

其次，我建议使用该方法来迭代返回的集合，而不是循环

例如：

var elements = document.getElementsByClassName("resize")

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

您是否尝试过document.getElementsByClassName？？将所有img id更改为class和try@Gowsikan是的，我试过了，但是我得到了一个错误，我认为是像我自己一样简单，我有我的JS如下，这给了我一个错误消息…你不需要声明函数$（id）都不是ebi。让我来编辑我的回答嘿，伙计，我很难让它正常工作，你能把它上传到JSFIDLE上吗？你给的链接是
getElemntsByClassName
，而不是
getElementsByClassName
+，在JSFIDLE中，你必须分别放置html、js和css:html是空的，js部分有标记（这可能会给出错误）。请尝试在打开javascript控制台的情况下测试代码（例如firebug），因此我在问题中说“在有人攻击我的web标准之前，img标记中的id只是为了测试功能。”我不是有意攻击你，因为我已经完成了这项非常艰巨的任务，我只是想为你节省一点时间，不管怎样，我对此表示抱歉。祝你玩得愉快。谢谢你，我感谢你的帮助。我只是在我的回答中加了一句，删除了那些不好的句子。
var elements = document.getElementsByClassName("resize")

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