在媒体查询中使用Javascript访问元素

我使用JavaScript访问带有GetElementById的HTML元素。 现在我改变了HTML/CSS，在大屏幕/小屏幕上使用媒体查询，到那时我需要将一些元素加倍。Double，因为我想在屏幕的不同位置显示和控制某些元素，这取决于它们是在PC上还是在智能手机上显示

问题是，现在我不能再使用getElementById了，因为它必须是唯一的。 但我不想使用getElementsByName，因为这需要对Javascript进行大量更改，并且基本上生成相同数量的代码，就好像我只是对每个媒体查询的所有元素使用不同的ID一样。有更好的方法吗

e、 g。 现在使用getElementById-设置一个图标：

document.getElementById("idIcon1").innerHTML = '<src="/Images...>';

使用getElementsByNames-设置在HTML上使用两次的相同图标，每个图标在其媒体查询部分：

document.getElementsByName("Icon1")[0].innerHTML = '<src="/Images...>';
document.getElementsByName("Icon1")[1].innerHTML = '<src="/Images...>';

在HTML中：

ScreenLarge/ScreenSmall类显示为：无，具体取决于屏幕大小

如果我使用getElementsByName，则会在JS中为[0]和[1]生成两行代码。但这几乎是一样的，就像只使用两个不同的ID，一个用于小屏幕，一个用于大屏幕

任何想法都欢迎

谢谢

---

hbi

如果您创建了一个函数，并使用匹配的名称为每一组不同的元素调用该函数，该怎么办？那样的话，你只需要为每一对打一次电话

myFunction(document.getElementsByName("idIcon1"), '<img src="/Images...">');

function myFunction(el, inner) {
    var i;
    for (i = 0; i < el.length; i++) {
       el[i].innerHTML = inner;
    }
}

---

我喜欢你下面的想法，你可以让它更通用一点，例如

function myFunction(name, prop, value) {
    var el = document.getElementsByName(name);
    var i;    

    for (i = 0; i < el.length; i++) {
      switch (prop) {
        case "innerHTML": el[i].innerHTML = value; break;
        case "color": el[i].style.color = value; break;
        ...
        default: break;
     }
  }
}

也许不是最漂亮的代码，但它符合我的目的，因此我将尝试一下：-

谢谢Partypette和Kamil

function myFunction(name, prop, value) {
    var el = document.getElementsByName(name);
    var i;    

    for (i = 0; i < el.length; i++) {
      switch (prop) {
        case "innerHTML": el[i].innerHTML = value; break;
        case "color": el[i].style.color = value; break;
        ...
        default: break;
     }
  }
}

  myFunction("idActVerb", "innerHTML",  "-");
  myFunction("idActVerb", "color", "blue");