如何检查样式ID是否包含某些css选择器？

Question

我在用于主题选项的php文件中有以下代码：

<style type="text/css" id="compiled_styles">
menu {color: red;}
</style>

如何检查带有ID＆＃34; compiled_styles＆＃34;的样式包含某些css选择器？

基本上，如果该样式不包含任何css选择器，我不需要显示这样的不必要的空代码：

<style type="text/css" id="compiled_styles">

</style>

Answer 1

首先，我认为你的意思是某些样式中存在一些 CSS规则 ，而不仅仅是选择器。你可以试试这个：

var style = document.querySelector('#compiled_styles');
var ss = style.sheet || style.styleSheet;
var hasSomeRule = (ss.rules || ss.cssRules).length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);

Demo 1

另一个解决方案是尝试获取样式元素的一些文本，如果它不是空的，它应该有一些特定的规则：

var style = document.querySelector('#compiled_styles');
var hasSomeRule = style.innerHTML.replace(/^\s+$/,'').length;
//remove the style if it's empty
if(!hasSomeRule) (style.parentNode || style.parentElement).removeChild(style);

Demo 2.