如何查找名称属性包含单词“geeks”并设置背景颜色的所有 div？

想要查找并设置背景颜色的 div，我们需要利用 JavaScript 中的 querySelectorAll() 方法和 CSS 样式属性。

使用 querySelectorAll() 方法

querySelectorAll() 方法接受一个 CSS 选择器作为参数，可以获取文档中所有匹配该选择器的元素。我们可以将选择器设置为 div[name*="geeks"]，表示获取名称属性包含单词“geeks”的所有 div 元素。

代码如下：

const geeksDivs = document.querySelectorAll('div[name*="geeks"]');

设置背景颜色

获取到所有匹配的 div 元素后，我们还需要为它们设置背景颜色。这可以通过设置元素的 style 属性来实现。

代码如下：

geeksDivs.forEach(div => {
  div.style.backgroundColor = "yellow";
});

将以上代码放在一起，实现查找名称属性包含单词“geeks”并设置背景颜色的所有 div 的功能。

完整代码如下：

const geeksDivs = document.querySelectorAll('div[name*="geeks"]');

geeksDivs.forEach(div => {
  div.style.backgroundColor = "yellow";
});

我们可以将代码在浏览器的控制台中运行，来查看效果。

注意：为了避免将背景色设置为内联样式，建议将 CSS 样式放在单独的样式表中，通过类名来为元素设置样式。