Javascript 在for循环内部分组&；根据样式属性修改跨度元素

我在一个页面上有一组span元素。它们使用从后端接收的一些信息进行定位，并且样式属性会随着之前的javascipt执行而相应更改

它就像一张地图

地图上有几个景点，每个景点都有一个名字。 但有些景点可能有几个名字

<span class="myimages" id="tag-14" style="position: absolute; left: 191px; top: 217px;">hello</span>
<span class="myimages" id="tag-15" style="position: absolute; left: 141px; top: 112px;">bye</span>
<span class="myimages" id="tag-16" style="position: absolute; left: 191px; top: 217px;">welcome</span>
<span class="myimages" id="tag-17" style="position: absolute; left: 50px; top: 12px;">lunch</span>

你好 再见 欢迎 午餐 我想做的是在这个对象数组中创建组，这样我就可以根据自己的意愿修改它们

我想做一些事情，比如创建一个数组，然后得到共享相同属性（相同位置）的数组，然后做一些只会影响该组span元素而不会影响其他元素的事情

我能够完成的第一部分：

function foam()
    {
    var menus = document.getElementsByClassName("myimages");

         for (var i=0; i < menus.length ; i++)
            {
                menuposition = menus[i].getAttribute("style");
                menus[i].setAttribute('style', menuposition+'background-color:pink;');
            }
    }

功能泡沫（）
{
var menus=document.getElementsByClassName（“myimages”）；
对于（变量i=0；i

但这当然会改变每个元素的样式属性，我希望能够在循环中创建一个循环，或者创建条件或其他东西来实现这一点

提前谢谢

更新： 我无法自动指定类名。位置信息来自一个简单的列表，如：“点名称，点名称在图像上的坐标”，只有告诉一个点相同的信息是x&y坐标。。。这在某种程度上是有限的，但事实确实如此

---

此外，我将修改一些属性，而不仅仅是更改背景颜色。

首先，您不应该使用

style

属性来实际更改元素的样式。您应该使用

样式

对象属性，因此您可以：

menus[i].style.backgroundColor = "pink";

---

这将保留其余的样式属性，因为它们都列在

style

对象中。即使您想要设置所有样式属性的列表，也可以使用

菜单[i].style.cssText

，这在旧版IE中是不可用的（随着jQuery的出现，我没有做太多

style

解析和操作，但我模糊地记得有一些问题（在我被同化之前）.无论如何，我发现按样式获取所有元素很有趣。讽刺的是，公认的答案使用纯Javascript。谢谢。事实上，我学到了一百万。（我无法投票，因为我还没有任何分数。）我将在我的文本下更新。我无法动态分配类，因为列表和位置样式属性来自平面列表。我需要找到一种方法对它们进行分组。

var menus = document.getElementsByClassName("myimages");
for (var i=0; i < menus.length ; i++) {
    if (menus[i].style.left === x + "px" && menus[i].style.top === y + "px") {
        menus[i].style.backgroundColor = "pink";
    }
}

<span class="myimages group-1" id="tag-14">hello</span>
<span class="myimages group-2" id="tag-15">bye</span>
<span class="myimages group-1" id="tag-16">welcome</span>
<span class="myimages group-3" id="tag-17">lunch</span>

.myimages {position: absolute;}
.group-1 {
    left: 191px;
    top: 217px;
    background-color: pink;
}
...