Change value of PHP variable in a CSS file using JavaScript

Question

I've searched around but nothing specific about this topic shows up. I know you can't change php variables with javascript due to the server side/client side difference.

I am trying to figure out if I have a php variable in a CSS file that holds the value of HEX code for a color which is applied through out the css file. Is there a way to use JavaScript to change the value of the hex code defined inside the tags? for example:

<?php
    $clabel = '#330099'; //purple 51:0:153
?>
.text2                          
{
    color:                       <?=$clabel?>; /* font change*/
    font-size:                  14px;
    font-weight:                bold;
    font-family:                Trebuchet MS, arial, verdana;

I want to know how to change the $clabel value so that it would than affect all the other instances of the clabel variable in the css file.

That isn't possible because as far as the browser is concerned, you're just handing it a complete CSS file. The PHP variable is long gone. Maybe you should look into [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). Right now, you can't use them in IE but they work in many other browsers. — Mike Cluck, Jun 07 '16 at 16:31
You cannot do it. Your css file wil be in ".css" format which will not be compiled in server.so there is no meaning of using a php variable inside css file. Instead you can use jquery inside your php file and make changes accordingly. — Sudharsan Selvaraj, Jun 07 '16 at 16:34
did you tell your webserver to execute that .css file as if it was a php script? If not, that php code is going out "raw" to the client, and will make the entire css file be ignored due to the syntax error - php code is NOT valid css. — Marc B, Jun 07 '16 at 16:34
The problem is the css file was already made for the website a while ago I am just adding some new features. The files huge, so it would take a long time to apply the variables. I was hoping there would be a way to change the value in the php tag but I guess not. — H.H., Jun 07 '16 at 16:35
@SudharsanSelvarj Not necessarily true. You can still have the server parse the PHP code in the file if you set it up right. Same as if you add PHP code to an HTML document. — Mike Cluck, Jun 07 '16 at 16:36
Oh I forgot to mention the files in a php format -_- my bad I forgot to check the extension. So there's no way to change the variables in the php file using JS? most of the code is CSS so I phrased it wrong in my initial question, I apologize for the mix up but it is a php file — H.H., Jun 07 '16 at 16:36
@MarcB Well, it depends on how the error handling tries to continue with after the syntax error. — gcampbell, Jun 07 '16 at 16:41
@gcampbell: css writes off anything after a bad rule within a block. since the error is at the top-level scope, the entire style file should be ignored. — Marc B, Jun 07 '16 at 16:41
@MarcB I think [CSS error handling](http://www.xanthir.com/blog/b4JF0) doesn't try to go up a scope, it goes forward in the current scope. — gcampbell, Jun 07 '16 at 16:46
Possible duplicate of [Changing a CSS rule-set from Javascript](http://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript) — miken32, Jun 07 '16 at 17:41

score 2 · Answer 1 · answered Jun 07 '16 at 16:36

2

No, this is not possible. The whole PHP-Code is executed on server side, and the client gets to see nothing but its output. JavaScript is completely client side, and has no clue if even any PHP Code existed on the page in the first place.

Alternatively, you can create two CSS-classes, one with the normal font and one with the changed font, and then change the class of the needed HTML tags via JavaScript. That's possible.

answered Jun 07 '16 at 16:36

Namnodorel

385
5
17

Alright I guess I'll have to implement CSS variables throughout. – H.H. Jun 07 '16 at 16:39

Derek · Answer 2 · 2016-06-07T17:37:17.730

2

Like other answers already said it, you can't change a PHP variable from Javascript or CSS.

But if you are trying to dynamically (meaning after the page rendering) change the color of all elements that have the "text2" class with an arbitrary color, you can actually do it with Javascript. And again, this has nothing to do with PHP.

You have to edit the CSS stylesheet with some Javascript :

var changeColor = function()
{
    var newColor = document.getElementById('color').value;

    // Iterate over all the stylesheets in the page
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].cssRules) {
            // Iterate over all the rules in a stylesheet
            for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
                // Search for the selector you want to change
                if (document.styleSheets[i].cssRules[j].selectorText == '.text2') {
                    // Change the color rule of that selector
                    document.styleSheets[i].cssRules[j].style.color = newColor;
                }
            }
        }
    }
}

document.getElementById('btn').addEventListener('click', changeColor);

.text2 {
  color: #0000FF;
}

<div class="text2">Bla bla</div>
<input type="text" value="#FF0000" id="color">
<button type="button" id="btn">Change</button>

You may have to adapt the script for it to work in every browser, but i tested it successfully in Firefox.

edited Jun 07 '16 at 17:37

answered Jun 07 '16 at 17:28

Derek

1,826
18
25

the issue here is that I am retrieving the colors from a pre-set theme in mySQL. SO when a user clicks an li link with the theme name I can use php to get the hexcodes of the colors and then change the value of the php variable at the top of the css.php stylesheet which would change the color at every location that variable is mentioned. So JS in this case won't help but that's a very clever solution and I'll keep it in mind for future projects. – H.H. Jun 17 '16 at 13:31
@H.H. if you get the variable from MySQL with PHP and already generate the CSS with PHP, why do you need Javascript ? Is it to apply the new style without reloading the page ? You could get the theme variables in javascript with an Ajax call to the server and then use my solution, but i think it's becoming too complex for such a simple feature. Maybe it's time to rethink your design ? – Derek Jun 17 '16 at 15:28
1

@H.H. here is an idea for your theming feature: load your PHP-generated stylesheet in a element, with a query string parameter. For example /css.php?theme=dark. And with javascript, you will be able to dynamically replace the stylesheet with another URL, for example /css.php?theme=light. – Derek Jun 17 '16 at 15:33
The main issue is that I need to find out which li the user clicks on. the way to retrieve that is using JS and than I want to send that variable to php so I can send it to another file. Can't use AJAX so I am going to see if I can use a form but I like that last idea it sounds promising i'll take a look at it – H.H. Jun 21 '16 at 15:45
Finding out what element was clicked with Javascript is really easy: take a look at this question http://stackoverflow.com/questions/485453/best-way-to-get-the-original-target – Derek Jun 21 '16 at 16:10
thanks Derek, I've already accomplished that. The issues I am running into are now strictly based on file pathing in an unfamiliar hierarchy, I am going to try the link idea because that seems promising. – H.H. Jun 22 '16 at 13:06

score 0 · Answer 3 · answered Jun 07 '16 at 17:00

Like you yourself have mentioned in your own question, javascript in this context is performed in the client side, even if you change the value at client side a new request will get the value that has been set to the variable $clabel in the server. A good strategy would be to create css classes to the colors and classes to format the text intended and then combine them. Whenever you want you can change the class using jquery for example or even pure javascript.

.color1 { color : #000; }
.color2 { color : #555; }
.color2 { color : #fff; }

.text2                          
{
  font-size:                  14px;
  font-weight:                bold;
  font-family:                Trebuchet MS, arial, verdana;
}

HTML

<p id="p1" class="text2 color1">some text</p>

if you want to apply the color2 in the client side, so you can do by using:

$('#p1').removeClass('color1').addClass('color2')

Change value of PHP variable in a CSS file using JavaScript

3 Answers3