使用 PHP 和 JavaScript 的动态 CSS - Dynamic CSS using PHP and JavaScript

Dynamic CSS using PHP and JavaScript

本文关键字：动态 CSS JavaScript PHP 使用 | 更新日期: 2023-09-27

我想在PHP变量中设置窗口宽度（通过JavaScript获取），并使用它来描述div容器的属性，但是以下代码不起作用...

<?php
header("Content-type: text/css; charset: UTF-8"); // Parsing CSS zu PHP
echo "<script type='text/javascript'>
    if(typeof(window.innerWidth) !== 'number') {
        if(document.documentElement.clientWidth !== 0) {
            width  = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight; 
        }
        else {
            width  = document.body.clientWidth;
            height = document.body.clientHeight;
        }
    }else {
        width  = window.innerWidth;
        height = window.innerHeight;
    }
    $cwidth = document.write(width);
    </script>";
?>

@charset "UTF-8";
#container
{
    width: <?php echo $cwidth . 'px'; ?>; 
}

迎接

你可以把它添加到HTML页面的底部，#container 的宽度在页面加载时由JS设置：

<script type='text/javascript'>
if(typeof(window.innerWidth) !== 'number') {
    if(document.documentElement.clientWidth !== 0) {
        width  = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight; 
    }
    else {
        width  = document.body.clientWidth;
        height = document.body.clientHeight;
    }
}else {
    width  = window.innerWidth;
    height = window.innerHeight;
}
document.getElementById('container').style.width = width;
</script>

顺便说一句：你在JS中写了clinet而不是client。