0

我在页面上有一组 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;');
            }
    }

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

提前致谢。

更新： 我无法自动分配班级名称。位置信息来自一个平面列表，例如：“点名称，图像上的点名称坐标”，并且唯一表明一个点相同的信息是 x 和 y 坐标......它在某种程度上是有限制的，但事实就是如此.

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

4

1 回答 1

2

首先，您不应该使用该style属性来实际更改元素的样式。你应该使用style object 属性，所以你这样做：

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

这会保留剩余的样式属性，因为它们都列在style对象中。即使您想要设置所有样式属性的列表，您也可以使用menus[i].style.cssText，这在较旧的 IE（<8 IIRC）中不可用，但这不会成为问题，因为我看到您正在使用getElementsByClassName.

那么，让我们看看你的问题。如果你认为你可以依赖<span>坐标，你可以像这样过滤掉它们：

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

这会将背景颜色“粉红色”分配给所有具有相同left和top样式属性（等于x和y像素）的图像。也许它不是你想要的（请多解释一下），也许你可能想将条件限制在left属性上，或者top.

但我最后的建议是为元素设置另一个样式类，这样所有的工作都可以变得更容易，甚至完全通过 CSS。只是要清楚：

<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>

这是相关的CSS：

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

除了实际动态地分配课程之外，别无他法。

于 2012-06-23T08:35:26.473 回答