Question

我有这个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());
        });
    });
});

这是一个风格转换器。 I get this code from here，但我已经修改了一点，因为我正在制作的webportal将合并服务器中的所有css，所以，我必须@import样式表只定位一个css并正确地更改它。

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

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

如您所见，我唯一的线索就是网址。

我如何定位这个css？我在jQuery方面的技能很少，而且我很确定我的代码做错了...但找不到适当的方法来定位它。

为什么我使用这个旧的styleswitcher而不是mediaqueries？因为我需要它用于IE7 （客户要求 - 我确信他们在星期六狩猎猛犸象），并且他们不喜欢respond.js和css3-mediaqueries，因为它们在Plone中引起了奇怪的错误。

Answer 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/

调整大小可能在小提琴中有点不稳定。如果调整大小在页面上多次触发，则可以将其置于超时状态。网上有很多关于此的建议。

Answer 2

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

$（document）.ready（function（）{

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”字符串....

在jQuery中定位@import，没有ID，没有其他属性

2 个答案: