Question

我想找到所有包含style="filter: blur(5px);"的标签并删除样式，以便查看模糊的地方。我该怎么做？

我在为document.querySelectorAll找出所有这些标签的正确查询时遇到了麻烦。

不幸的是，这不起作用。

document.querySelectorAll('[style=filter: blur(5px)]')

编辑：谢谢大家。我缺少引号和分号。

document.querySelectorAll('[style="filter: blur(5px);"]').forEach((tag) => { tag.style = ""; })

Answer 1

如果属性值包含空格或其他特殊字符，则需要在属性值两边加上引号。

document.querySelectorAll('[style="filter: blur(5px)"]')

但是请注意，这是在寻找与整个style属性完全匹配的内容。如果是style="color: red; filter: blur(5px)"，则不匹配。如果要匹配字符串是否出现在属性中的任何位置，则需要使用*=而不是=：

document.querySelectorAll('[style*="filter: blur(5px)"]')

Answer 2

除引号外，由于属性包含结尾的分号，请在选择器字符串的末尾添加;，否则将不匹配：

console.log(document.querySelectorAll('[style="filter: blur(5px);"]').length);

<div style="filter: blur(5px);">foo</div>

Answer 3

您应该在属性值的周围加上双引号。 [style="filter: blur(5px);"]

document.querySelectorAll('[style="filter: blur(5px);"]');

Answer 4

尝试一下。它通过document.querySelectorAll('*')

选择DOM中存在的所有元素。

然后，对生成的NodeList进行迭代，并使用getAttribute来检查style属性是否存在，如果存在，我们将检查其是否等于"filter: blur(1px)"。如果是，我们使用

删除该元素

e.parentNode.removeChild(e)

var a = document.querySelectorAll('*');
a.forEach((e) => {
  if (e.getAttribute('style') !== null) {
    if (e.getAttribute('style') == "filter: blur(1px)") {
      console.log(e)
      e.parentNode.removeChild(e);
    }
  }
})

<div style="filter: blur(1px)">a</div>
<div>d</div>

如何document.querySelectAll内联CSS样式？

4 个答案: