jQuery检查CSS颜色值不起作用

Question

我正在使用jQuery检查特定CSS属性和值是否存在。 为什么不起作用？ 我希望看到“是”日志。

 $(document).ready(function() { if ($('p').css('color') === 'blue') { console.log('yes'); } else { console.log('no'); } }); 

 p { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>text</p> 

Answer 1

您的颜色将以RGB值的形式返回，而不是颜色的名称。 您将需要与RGB字符串进行比较。

 $(document).ready(function() { var color = $('p').css('color'); console.log(color); if (color === 'rgb(0, 0, 255)') { console.log('yes'); } else { console.log('no'); } }); 

 p { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>text</p> 

Answer 2

您可以迭代document.styleSheets ，检查cssRules .selectorText是否等于"p" ，然后检查.style .color属性是否等于"blue"

 $(document).ready(function() { for (let {cssRules: [{selectorText, style:{color}}]} of document.styleSheets) { if (selectorText === "p") { if (color === "blue") { console.log("yes") } else { console.log("no") } break; } } }); 

 p { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>text</p>