如何document.querySelectAll内联CSS样式？

Question

我想找到所有包含style="filter: blur(5px);"标签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检查样式属性是否存在，如果存在，则检查其是否等于"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>