Question

我使用JavaScript通过GetElementById访问HTML元素。现在我改变了HTML / CSS以使用Media Queries用于大/小屏幕，并且我需要将一些元素加倍。 Double，因为我想在屏幕的不同位置显示和控制（javascript）某些元素，具体取决于它们是在PC上还是在智能手机上显示。

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

e.g。 now（使用getElementById） - 设置一个图标：

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

with getElementsByNames - 设置相同的Icon（在HTML上使用两次，每次在Media Query部分中）：

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

HTML ：

中的

<div class="screenLarge">
  <div name="idIcon1" class="icon1_Large"></div>
  ...
</div>
<div class="screenSmall">
  <div name="idIcon1" class="icon1_Small"></div>
  ...
</div>

（ScreenLarge / ScreenSmall类是Display：none，具体取决于屏幕尺寸。）

如果我使用getElementsByName，那么在JS中产生2行代码（对于[0]和[1]）。但这几乎是一回事，好像只使用两个不同的ID，一个用于小屏幕，一个用于大屏幕。

欢迎任何想法......

感谢 HBI

Answer 1

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

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

也许不是最漂亮的代码，但它符合我的目的，所以我试一试： - ）

感谢partypete和Kamil

Answer 2

为什么不使用jquery。您可以对类执行操作。例如如果（$（window）.width（）＆lt; 768）

在那里你可以检查窗口宽度然后。 $（＆＃39; .parent .children＆＃39;）。css（＆＃39;显示＆＃39;，＆＃39;无＆＃39;）：

Answer 3

如果您为每个具有匹配名称的不同元素集创建了一个函数，该怎么办？这样你只需要为每一对调用一次。

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

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

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

3 个答案: