Question

我想使用jquery，css，php和html创建动态样式表。我正在做一个ajax请求（用jquery）给php css文件我的屏幕宽度。但是我的php css文件不包含div（容器）中由ajax请求给出的属性宽度的值（窗口宽度）。该代码应适用于IE和FF。

代码：

jQuery Ajax

jQuery(document).ready(function($){
    $.ajax({
    type: "POST",
    cache: true,
    url: 'http://mywebpage/css/template.php',
    data: "bwidth=" + $(window).width(),
    async: false
    }); 
});

包括php css文件

<link rel='stylesheet' type='text/css' href='<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.php' />

php css文件中的

<?php
header("Content-type: text/css; charset: UTF-8");

$bwidth = isset($_POST['bwidth']) ? (int) $_POST['bwidth'] : 800;
?>

#container
{
width: <?php echo $bwidth . 'px'; ?>; 
}

我做错了什么？

迎接

Answer 1

新的CSS未应用，因为您没有对AJAX响应做任何事情。 $.ajax()返回一个带有done()函数的对象，您可以使用它来获取响应文本：

$.ajax({...}).done(function(css) {
    $('body').append('<style>' + css + '</style>');
});

Answer 2

没有必要这样做（正如评论所示）。 CSS和jQuery应该照顾你需要做的一切。

也许您需要在CSS媒体查询上进行一些Google搜索，因为它听起来像是要根据屏幕宽度影响css。

使用jquery在动态样式表中设置属性值

2 个答案: