How to use a PHP variable in a CSS style?

Question

I kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.

I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.

Would you please help me?

Thank you.

<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;

<?php $screen_height = "<script>document.write(y)</script>";?>   
</script>   

<style type="text/css">

#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}

My solution was:

#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}

Thank you for your help. Best regards.

possible duplicate of [Reference: Why does the PHP (or other server side) code in my Javascript not work?](http://stackoverflow.com/questions/13840429/reference-why-does-the-php-or-other-server-side-code-in-my-javascript-not-wor) — Quentin, Sep 08 '13 at 13:25
You could make use of media queries here ... http://www.w3.org/TR/css3-mediaqueries/‎ — djot, Sep 08 '13 at 13:29
wow, trying to execute client-side JavaScript, inside server-side PHP, inside client-side CSS, using variables set by different client-side JavaScript. Language inception! Anyway yeah, it won't work. Highly recommend reading Quentin's linked pseudo-question. Why not just set height 100%? — Dave, Sep 08 '13 at 13:36
If you want to use PHP "in" your CSS, you could echo the complete CSS via PHP ... so instead of xy.css call xy.php and echo the computed CSS which you generate(d) in the xy.php file. — djot, Sep 08 '13 at 13:40
@Jari Proprietary, crippling perfs [expression](http://stackoverflow.com/a/476289/137626) allow(ed?) it. I obviously recommend against using it, that's the job of JavaScript — FelipeAls, Sep 08 '13 at 13:42

score 0 · Answer 1 · answered Sep 08 '13 at 13:27

0

Try to use:

<?php echo $screen_height; ?>

instead of:

<?php $screen_height = "<script>document.write(y)</script>";?>

you cannot use JS in CSS!

answered Sep 08 '13 at 13:27

Majid

13,853
15
77
113

score 0 · Answer 2 · answered Sep 08 '13 at 13:31

Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.

score 0 · Answer 3 · answered Sep 08 '13 at 14:07

javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable

      <script type="text/javascript">
       function myfun()
    {
      var w=100;
      var h=200;
      document.body.innerHTML = '<div   style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
    }
         </script>


 <body>
    <div id="d1">hello this is div 1</div>
    <button id="b1" onclick="myfun();">click</button>
</body>

you can use the javascript itself to load the div and assign the css properties.

score 0 · Answer 4 · answered Sep 08 '13 at 14:16

create a file like style.css.php Start the file with and then treat it like a normal CSS file, but you will be able to use php values in it.

You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.

Ideally though it would be better to simply use javascript to alter a class, or use media queries.

score 0 · Answer 5 · answered Sep 08 '13 at 19:46

0

what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.

answered Sep 08 '13 at 19:46

kasper Taeymans

6,950
5
32
51

How to use a PHP variable in a CSS style?

5 Answers5