Conditional if it has some css

Question

How to check if a div has some specific css?

Here is what I have tried without success:

	$("#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>

A simple check of what css('top') returns in your console would show you why. .... console.log($(this).css('top')) — charlietfl
– charlietfl, Commented Apr 28, 2018 at 14:05
When you ask question, you have to mention what kind of debugging you have already done, seems like you haven't debugged at all — Ruan Mendes
– Ruan Mendes, Commented Apr 28, 2018 at 14:20

Sagiv b.g · Accepted Answer · 2018-04-28 15:16:31Z

2

You forgot to check for pixels.
For example:

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

Instead of

css("top") == "10"

As for the background-color, .css returns it as 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>

Edit
I would take a different approach and use css classes instead of inline styling.

Here is a very simple example for this use case:

$("#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>

edited Apr 28, 2018 at 15:16

answered Apr 28, 2018 at 14:04

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

Also note $(this) is $('#red') inside the handler....no need to search dom for it again

Nrc Over a year ago

You are right. Now it works. How about the option to check the color (in my example in comments)

Ruan Mendes Over a year ago

@nrc don't be greedy, you already have your answer, use it to figure out your other problem, do some debugging instead of asking others to write/fix your code for you

Sagiv b.g Over a year ago

the color returned as rgb, a simple console.log can verify that. with that said, i would do it with css classes instead of inline styling.

Collectives™ on Stack Overflow

Conditional if it has some css

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related