How to change color in CSS with PHP?

Question

In my CSS file a div has following property: background-color: blue;

Is it possible to change the color with PHP?

HTML:

<div id="div_id" class="div_class">
    Text
</div>

CSS:

.div_class {
   background-color: blue;
}

PHP:

if($variable == "Black")
{
    ... *change css color to black* ...
}

<div id="div_id" class="div_class" style="background-color: black;"> or add additional class like <div id="div_id" class="div_class div_class_black_bg"> — u_mulder
– u_mulder, Commented Mar 23, 2020 at 11:26
@AnuragSrivastava Yes It could be done with JS but I need to get the information which color the div gets (from the php variable) — wabizo
– wabizo, Commented Mar 23, 2020 at 11:33

RedJanvier · Accepted Answer · 2020-03-23 12:20:55Z

4

You can do it by in-line style or additional class.

In-line:

<?php
    if($variable == "Black")
      echo '<div id="div_id" style="background-color:black" class="div_class">
        Text
      </div>';
?>

Additional class:

<?php
    if($variable == "Black")
      echo '<div id="div_id" class="div_class backgroundcolor-black">
        Text
      </div>';
?>

Your css looks like:

.div_class.backgroundcolor-black {
    background-color:black;
}

edited Mar 23, 2020 at 12:20

RedJanvier

955 bronze badges

answered Mar 23, 2020 at 11:27

Marty1452

4055 silver badges19 bronze badges

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

1 Comment

tom Over a year ago

Vote for the "Additional class" solution.

Pete · Accepted Answer · 2020-03-23 11:39:23Z

4

Why not just append the variable to the class and add an override style:

<div id="div_id" class="div_class div_class--<?php echo strtolower($variable); ?>"  >
    Text
</div>

.div_class {
  background-color: blue;
}

.div_class--black {
  background-color: black;
}

answered Mar 23, 2020 at 11:39

Pete

58.8k31 gold badges132 silver badges188 bronze badges

5 Comments

Vidal Over a year ago

if the user can pass the value via the url, this solution will be open to xss.

Pete Over a year ago

@Vidal There is no mention that this is a $_GET variable

Vidal Over a year ago

yes but you are not doing any sanitizing on the variable $variable, and as I mention if the user can pass the value via url. just a note.

Pete Over a year ago

@Vidal the sanitizing should have happened from whatever changed the $_GET into $variable so why should I show that in my answer - even when the OP has not said this comes from the url directly - you are poking holes in an answer to a question that has not been asked

Vidal Over a year ago

my friend, you haven't read my first comment...**IF** THE USER CAN PASS THE VALUE VIA THE URL. if the user can't then is not suppose to be an issue. I always sanitize and take measures of small details.

Maruthi Prasad · Accepted Answer · 2020-03-23 11:41:35Z

2

CSS :

.div_class{
    background-color: blue;
}
.div_red{
    background-color: red;
}
.div_green{
    background-color: green;
}

We can change color using below code

PHP:

$class = 'div_class';
if($variable == "red")
{
    $class = 'div_red';
} else if($variable == "green") {
    $class = 'div_green';
}

<div id="div_id" class="<?php echo $class; ?>">
    Text
</div>

I hope above will help.

answered Mar 23, 2020 at 11:41

Maruthi Prasad

784 bronze badges

Comments

Mannya · Accepted Answer · 2020-03-23 11:35:10Z

1

<div id="div_id" class="<?= ($variable=='black')?'div_class_black':'div_class"?>"> Text </div>

In css:

.div_class{
    background-color: blue;
}

.div_class_black{
   background-color: black;
}

You have to create two classes

answered Mar 23, 2020 at 11:35

Mannya

1271 gold badge2 silver badges12 bronze badges

2 Comments

wabizo Over a year ago

How does the ternary operator looks like when the are 3 oder 4 colors?

Mannya Over a year ago

for multiple colors $colors = ['red','black','blue','yellow']; if (in_array($variable, $colors)){ echo "div_class_".$variable; }else{ echo "div_class_"; }

Vidal · Accepted Answer · 2020-03-23 11:35:14Z

1

Define 2 clases

.div_class_blue{
   background-color: blue;
}
.div_class_black{
   background-color: #000;
}

on the PHP you can do a if/else with ternary operator.

<div id="div_id" class="<?php ($variable=="black")?"div_class_black":"div_class_blue" ?>"  >
    Text
</div>

PHP Manual

answered Mar 23, 2020 at 11:35

Vidal

2,6062 gold badges20 silver badges35 bronze badges

2 Comments

wabizo Over a year ago

How does the ternary operator looks like when the are 3 oder 4 colors?

Vidal Over a year ago

you can stack them, but in that case for easy reading people use regular if/else statements

Collectives™ on Stack Overflow

How to change color in CSS with PHP?

5 Answers 5

1 Comment

5 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related