Update css at onchange event

Question

I was wondering if it is possible to edit css properties on a onchange event.

My HTML + Script

    <div class="Content">

        <input id="ColorSlider" type="range" min="0" max="360" value="25" onchange="showValue(this.value)"/>
        <div id="ColorViewer">
            Color value = 25
        </div>

        <script>
            function showValue(newValue){
                document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue;
            //something here that sends the value to the css file

}

And my CSS, which is now receiving session variables from a different PHP file

<?php
header('Content-type: text/css');
    session_start();

    $CssBorder = $_SESSION['CssBorder'];
    $CssH1BackgroundColor = $_SESSION['CssH1BackgroundColor'];

?>

Is it possible to send a variable ( maybe through PHP session ) to the CSS file. and change the color of the HTML border?

For clearing purpose, I want my css file external.

@RUJordan it can, just create a PHP file, call a header saying it's css. and then use this as the variable. — Rien, Dec 17 '13 at 10:29

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

You really don't need to use PHP for this. This can easily be done using javascript.

<script>
function showValue(newValue){
    document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue;
    //something here that sends the value to the css file
    document.getElementById("ColorViewer").style.border = "[width] [style] [colour]";
}
</script>

If however you absolutely must dynamical load a generated external style sheet then the following link using jQuery may be of use to you:

How to load up CSS files using Javascript?

Also your PHP generated CSS file would probably respond better using $_GET[] variables rather then $_SESSION[] ones as you won't be able to set a session variable from the user side HTML.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 17 '13 at 10:40

AeroX

3,387
2
25
39

Thank you very much this might help me. And to explain further. I dont use any HTML to create my pages. I have a standard lay-out with HTML CSS. and use a index.php to create object, as in content, title, file links, to be able to create a very dynamic website which is easy to edit. But i did not know you could change style with only javascript. thank you very much – Rien Dec 17 '13 at 10:53
you solved my problem, Thank you very much, never thought it would be this easy. – Rien Dec 17 '13 at 11:03

score 0 · Answer 2 · answered Dec 17 '13 at 10:30

The easiest way is to include the required css in the html page. You can use a bit of javascript to get things done. If you need to keep css in an external file, you would need to generate it using PHP. Then send the color back to the server, recreate the css file and serve the page again. Seems a bit complicated imho.

Sudheesh.R · Answer 3 · 2013-12-17T11:27:09.293

If you want to take data from session, you can follow with AJAX.

function showValue(newValue){ 
      $("#ColorViewer").html("Color value = " + newValue);
      $.get("sessionpage.php",function(data,status){  //print green,blue from session, seperated using comma.
           var colors = data; //"green,blue";
           var colorsArray =colors.split(",");
           var CssBorder = colorsArray[0];
           var CssH1BackgroundColor= colorsArray[1];
           $("#ColorViewer").css('background-color', CssH1BackgroundColor);
           $("#ColorViewer").css("border","5px solid");
           $("#ColorViewer").css("border-color",CssBorder );
      });

}

For just change colors using jquery

function showValue(newValue){ 
   $("#ColorViewer").html("Color value = " + newValue);
   $("#ColorViewer").css('background-color', "green");
   $("#ColorViewer").css("border","5px solid blue");

}

Update css at onchange event

3 Answers3