在媒体查询中使用 Javascript 访问加倍元素答案

【问题标题】：accessing doubled elements with Javascript in Media Queries在媒体查询中使用 Javascript 访问加倍元素
【发布时间】：2016-08-31 03:03:27
【问题描述】：

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

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

例如现在（使用 getElementById） - 设置一个图标：

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

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

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

【问题讨论】：

标签： javascript css media-queries

【解决方案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");

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

感谢派对和卡米尔

【讨论】：

【解决方案2】：

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

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

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

【讨论】：