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

时间:2013-09-10 08:09:30

标签: php jquery html css ajax

我想使用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'; ?>; 
}

我做错了什么?

迎接

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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