jquery - 有条件的，如果它有一些CSS

Question

如何检查一个 div 是否有一些特定的 css？

这是我尝试过但没有成功的方法:

	$("#red").click(function() {
		
		if( $("#red").css("top") == "10") {
			$("#red").css("top", "100");
		} else {
			$("#red").css("top", "10");
		}
		
		/*
		if( $("#red").css("background-color") == "red") {
			$("#red").css("background-color", "grey");
		} else {
			$("#red").css("background-color", "red");
		}
		*/

    });

#red{
	position: absolute;
	top:10px; left:10px;
	width:100px; height:100px;
	background-color:red;
	cursor:pointer;	
}

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

<div id="red"></div>

Answer 1

你忘了检查像素。
例如:

css("top") == "10px"

代替

css("top") == "10"

至于background-color，.css 将其返回为rgb。

$("#red").click(function() {
  var redColor = "rgb(255, 0, 0)";
  var greyColor = "rgb(128, 128, 128)";

  if ($(this).css("top") == "10px") {
    $(this).css("top", "100px");
  } else {
    $(this).css("top", "10px");
  }

  if ($(this).css("background-color") == redColor) {
    $(this).css("background-color", greyColor);
  } else {
    $(this).css("background-color", redColor);
  }
});

#red {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

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

<div id="red"></div>

编辑
我会采取不同的方法并使用 css 类而不是内联样式。

这是此用例的一个非常简单的示例:

$("#box").click(function() {
  if ($(this).hasClass('up')) {
    $(this).removeClass('up');
    $(this).addClass('down');
  } else {
    $(this).removeClass('down');
    $(this).addClass('up');
  }
});

#box {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.up {
  top: 10px;
  left: 10px;
  background-color: red;
}

.down {
  top: 100px;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="up"></div>