Can I Make A Div Change Its Background Color Based On The Value Inside It?

I have a PHP index page where data from an array is being displayed inside

's on top of a picture. I want the

's to change color based on the content inside i

Solution 1:

Within the php code, give the div a different class if "Due in" is less than or equal to 5. So in your PHP, when you're looping through your array:

<?phpecho"<div";
  if($myArray[i]['due'] <= 5){ echo" class='dueSoon'"; }
  echo"> $myArray[i]['customer'] - $myArray[i]['date'] - $myArray[i]['due'] </div>";
?>

so that the following gets output when there's less than 5 days:

<divclass="dueSoon"> ... </div>

And then css:

.dueSoon { background-color:red; }

Solution 2:

In your PHP code, check for this condition, if the condition is being met, then add a css class to that div (for which the condition is being satisfied).

Define the CSS class in your CSS file.

Solution 3:

We will suppose that your array is named as results

CSS

.red{
background-color: red;
}

The following is the PHP code that you have to use to print out this array.

<?phpforeach ($resultsas$result){?><divclass="<?phpif ($result['due'] < 5 || $result['due'] == 5) echo'.red';?>">
 Customer: <?phpecho$result['customer']; ?>
 Date: <?phpecho$result['date'];?>
 Due: <?phpecho$result['due']; ?></div><?php } ?>

Share