如何在 CSS 样式中使用 PHP 变量

How to use a PHP variable in a CSS style?

本文关键字：PHP 变量 样式 CSS      更新时间：2023-09-26

我恳请您的想法：我想根据窗口高度的大小生成一个div。

我创建了以下脚本来通过javascript提取高度。然后，我将值转换为PHP变量，并尝试将其插入到相应的CSS工作表中。当我输入固定数字（例如 800px）时，div 会正确显示。当我尝试使用 PHP 变量时，我什么也没看到。

你能帮帮我吗？

谢谢。

<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;}

我的解决方案是：

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

谢谢你的帮助。此致敬意。

尝试使用：

<?php echo $screen_height; ?>

而不是：

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

你不能在CSS中使用JS！

你的javascript在浏览器中执行，而PHP在服务器上执行。当javascript计算出屏幕的大小时，页面已经在浏览器中呈现。如果您需要根据显示屏大小更改div 的大小，只需使用 javascript 函数修改div 的大小即可。

JavaScript 在客户端执行，而 PHP 代码在服务器端执行。 将所需的宽度和高度存储在 JavaScript 变量中

      <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>

您可以使用 JavaScript 本身来加载div 并分配 CSS 属性。

创建一个类似style的文件.css.php以 开头文件 然后像对待普通的CSS文件一样对待它，但您将能够在其中使用php值。

但是，

您将无法在其中使用javascript，但是您可以通过请求将值传递给它，以便您可以请求style.css.php？windowSize= 800。

理想情况下，最好只是使用 javascript 来更改类或使用媒体查询。

你到底想做什么？ 如果你只需要div大小与窗口大小相关，你可以简单地使用一个百分比（例如CSS，高度：90%）。 如果你想在 DOM 加载后更改div 大小，你需要一些 JavaScript。

相关文章：