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字符串进行比较。

＆＃13;

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

＆＃13;

p {
  color: blue;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

$(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;
    }
  }
});

＆＃13;

p {
  color: blue;
}

＆＃13;

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

＆＃13;

jQuery检查CSS颜色值不起作用

2 个答案: