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>

标签： jquerycss

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>