Question

在使用jQuery将颜色分配给id作为'ID'的元素时，我们分配如下：

$('#ID').css({'background-color':'#FF0000'});

但是如何知道元素是否已经分配了颜色？

我需要检查元素是否已经分配了红色。如果已经指定了红色，我需要在JavaScript中设置一些标志。

Answer 1

获得val

var old_css = $('#ID').css('background-color');

或使用

var old = document.getElementById("id").style.backgroundColor;

也看看这篇文章

Can jQuery get all CSS styles associated with an element?

Answer 2

就像Haim Evgi建议的那样，你可以获得元素的CSS值，但是如果你试试这个

console.log(jQuery('#someId').css('background-color'));

在没有设置任何background-color的元素上，您将获得transparent。现在让我们假设你想要扩展你的用例不仅覆盖#f00而是变色，你可能会遇到麻烦。

我的第一个想法，在阅读你的问题时，是使用CSS类来识别变化：

CSS

/* i assume red indicates an error :) */
.error { background-color: #f00; }

的JavaScript

if(jQuery('#someId').hasClass('error')) {
  /* do something fancy */
}

或

jQuery.each(jQuery('.error'), function(index, value) {
  /* do something with each erroneous element */
});

这使得设置和检查更改也更加舒适。

[编辑：示例代码段]

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .error{ background-color: #f00; }
    </style>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
      console.log('Background #someId: ' + jQuery('#someId').css('background-color')); // transparent
      console.log('Background #someOtherId: ' + jQuery('#someOtherId').css('background-color')); // transparent

      console.log('#someId has error: ' + jQuery('#someId').hasClass('error')); // false
      console.log('#someOtherId has error: ' + jQuery('#someOtherId').hasClass('error')); // false

      jQuery('#someOtherId').addClass('error');

      console.log('#someId has error: ' + jQuery('#someId').hasClass('error')); // false
      console.log('#someOtherId has error: ' + jQuery('#someOtherId').hasClass('error')); // true
    });
    </script>
  </head>
  <body>
    <div id="someId">foo</div>
    <div id="someOtherId">bar</div>
  </body>
</html>

Answer 3

使用jquery中的.attr（）函数获取有关属性的信息。

http://api.jquery.com/attr/

像

这样的东西

$("#ID").attr('style')

应该是一个好的开始。

如何测试元素是否已经指定了颜色？

3 个答案: