如何document.querySelectorAll内联css样式？

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

试试这个。它通过document.querySelectorAll('*')选择DOM中存在的所有元素

然后迭代生成的NodeList，并使用getAttribute检查样式属性是否存在，如果存在，我们检查它是否等于"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>