3

我有这个 jQuery 代码：

$(document).ready(function() {

    function adjustStyle(width) {
        width = parseInt(width);
        if (width < 701) {
            $(('style[type="text/css"]).attr([href=*400*]')).text('@import url("css/styles_400.css");');
        } else if ((width >= 701) && (width < 900)) {
            $(('style[type="text/css"].attr([href=*400*]')).text('@import url("css/styles_800.css");');
        } else {
           $(('style[type="text/css"].attr([href=*400*]')).text('@import url("css/styles_normal.css");');
        }
    }

    $(function() {
        adjustStyle($(this).width());
        $(window).resize(function() {
            adjustStyle($(this).width());
        });
    });
});

这是一个风格切换器。我从这里得到这段代码，但我做了一些修改，因为我正在制作的门户网站将合并服务器中的所有 css，因此，我必须 @import 样式表以仅针对一个 css 并正确更改它。

我无法为导入的 css 提供标题或 ID（它是动态的），我尝试了上面的代码，因为我拥有的唯一代码是：

  <style type="text/css">@import url('css/styles_400.css');</style>

如您所见，我唯一的线索是 URL。

我怎样才能定位这个CSS？我在 jQuery 方面的技能很少，而且我很确定我的代码做错了什么......但找不到合适的方法来定位它。

为什么我使用这种旧式切换器而不是媒体查询？因为我在 IE7 中需要它（客户要求 - 我确定他们会在星期六捕猎猛犸象），而且他们不喜欢 response.js 和 css3-mediaqueries，因为它们会在 Plone 中引起奇怪的错误。

4

2 回答 2

1

试一试：

更新：

$(document).ready(function() {

    function adjustStyle(width) {
        width = parseInt(width, 10);
        if (width < 701) {
            $('style:contains("400")').empty().html('@import url("/css/style_400.css");');
        } else if ((width >= 701) && (width < 900)) {
            $('style:contains("400")').empty().html('@import url("css/styles_800.css");');
        } else {
           $('style:contains("400")').empty().html('@import url("css/styles_normal.css");');
        }
    }

    $(function() {
        adjustStyle($(window).width());
        $(window).resize(function() {
            adjustStyle($(this).width());
        });
    });
});

小提琴：http: //jsfiddle.net/XLkRN/3/

调整大小可能有点不稳定。如果在您的页面上多次触发调整大小，您可以将其设置为超时。网上有很多关于这方面的建议。

于 2013-06-12T16:37:03.993 回答
1

最后，经过几个小时的玩耍，我找到了解决方案：

$(文档).ready(函数() {

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $('style:contains("styles")').text('@import url("css/styles_400.css");');
    } else if ((width >= 701) && (width < 900)) {
        $('style:contains("styles")').text('@import url("css/styles_800.css");');
    } else {
       $('style:contains("styles")').text('@import url("css/styles_normal.css");');
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

});

它类似于jk。代码，我删除.html了方法，因为这样，我无法正确定位 CSS，而是所有 @import CSS。

另外，我更改了关键字，因为当页面加载“styles_800”时，其他地方没有“400”字符串......

于 2013-06-14T08:15:05.377 回答