Question

我有这种风格的div

<div style="position:absolute;top:0px;left:0px;width:2004px;height:700px;background-color:undefined;background-image:url(https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;"></div>

如何获得此div并使用另一个div（通过其背景图像）来应用它？这是自动生成的div，我无法添加类或ID。

Answer 1

一种方法是获取已分配样式的所有div，然后找到具有指定为style.backgroundImage的元素：

const divs = document.querySelectorAll('div[style]');
const url = 'https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg';

const elem = Array.from(divs)
  .find(item => item.style.backgroundImage.includes(url));

console.log(elem);

<div style="position:absolute;top:0px;left:0px;width:2004px;height:700px;background-color:undefined;background-image:url(https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;"></div>

在继续之前，请先了解此代码的含义：

检查元素的背景是否包含URL。不检查确切的值。
必须遍历可用的元素才能找到所需的元素，当有许多这样的元素时，这可能是一项代价高昂的操作。

Answer 2

您可以使用css属性选择器：

with open('ops.log', 'r') as log_fh:
    data = [int(line.split(',')[1]) for line in log_fh.readlines()]
    print max(data), min(data)

这样，您将使用提供的背景图像选择元素的第一个出现点。无需通过元素集合进行迭代。

document.querySelector('[style*="background-image:url(https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg)"]');

console.log(document.querySelector('[style="background-image:url(https://taxirondo.net-informatika.com/wp-content/uploads/2018/04/slajder1.jpg)"]'));

有关attribute selectors

的更多信息

Javascript通过它的背景图片获得div？

2 个答案: