php - 使用 PHP 和 JavaScript 的动态 CSS

Question

我想在一个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'; ?>; 
}

问候

Answer 1

您可以将其添加到 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。