Question

想象一下一个包含多个div元素的HTML页面，它们都是相同的class，但有另一个属性可以区分它们：

<!DOCTYPE html>
<html>
<body>
  <div class="myClass" foo="anythingInHere_1">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  </div>
  <div class="myClass" foo="anythingInHere_2">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  </div>
  <div class="myClass" foo="anythingInHere_3">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  </div>
</body>
</html>

属性foo包含某种id，即问号后面的整数。我需要从foo属性中提取该ID，并将其分别存储在另一个属性中。我用（不知何故）使用JavaScript来解决这个问题：

a = document.getElementsByClassName("myClass")
a[0].setAttribute("id", a[0].getAttribute("foo").match("(?<=anythingInHere_)[0-9]+"))

此外，还有一个JSON文件可以保存这些提取的ID的其他数据，例如：

{
  "data": [
    {"id": 1, "fill": "#0099ff"},
    {"id": 2, "fill": "#ff0066"},
    {"id": 3, "fill": "#00cc00"}
  ]
}

根据映射到提取的id的这些颜色，我想用一个半透明的框覆盖相应的div，填充JSON中指定的颜色。

这就是我陷入困境的地步。可能需要JS和CSS的组合，并且必须有某种逻辑（我猜可能是JS）将这些半透明框放在右侧divs上。

您可能已经注意到HTML，CSS和JS不是我的主要技能，但我尽可能评价这项承诺 - 如果没有，请纠正我。否则，我会感谢一些帮助或一般建议如何继续前进。

Answer 1

我已经采取了一些捷径，但希望这是你正在寻找的。如果你需要将div与另一个重叠，需要将div置于绝对位置。

<body>
  <div style="width:104px; height:142px;position:absolute; top:0px; left:0px">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142" style="display:inline-block;">
    <span style="position:absolute; top:0px; left:0px; width:104px; height:142px; display:inline-block; background:rgba(255, 0, 0, 0.0)" class="myClass" foo="anythingInHere_1" >
    </span>
  </div>
  <div style="width:104px; height:142px;position:absolute; top:150px; left:0px">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142" style="display:inline-block;">
    <span style="position:absolute; top:0px; left:0px; width:104px; height:142px; display:inline-block; background:rgba(255, 0, 0, 0.0)" class="myClass" foo="anythingInHere_2" >
    </span>

  </div>
  <div style="width:104px; height:142px;position:absolute; top:300px; left:0px">
    <img src="https://www.w3schools.com/html/w3schools.jpg" alt="W3Schools.com" width="104" height="142" style="display:inline-block;">
    <span style="position:absolute; top:0px; left:0px; width:104px; height:142px; display:inline-block; background:rgba(255, 0, 0, 0.0)" class="myClass" foo="anythingInHere_3" >
    </span>
  </div>
</body>

脚本

function hexToRgb(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16), 
        b: parseInt(result[3], 16)
    } : null;
}

var a = document.getElementsByClassName("myClass")
var obj = JSON.parse('{   "data": [     {"id": 1, "fill": "#0099ff"},    {"id": 2, "fill": "#ff0066"},    {"id": 3, "fill": "#00cc00"}  ]}');

for(var x=0;x<a.length;x++) 
    a[x].setAttribute("id", a[x].getAttribute("foo").match("(?<=anythingInHere_)[0-9]+"))

for(var x=0;x<obj.data.length;x++)
    document.getElementById("" + (x+1)).style.background = "rgba(" + hexToRgb(obj.data[x].fill).r + "," + hexToRgb(obj.data[x].fill).g + "," + hexToRgb(obj.data[x].fill).b + ",0.4)";

Answer 2

你需要绝对定位DIV

根据属性覆盖<div>

2 个答案: