如何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>