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());
        });
    });
});

スタイルスイッチャーです。このコードは here から取得しますが、作成している Web ポータルがサーバー内のすべての css をマージするため、少し変更しました。そのため、スタイルシートを @import して 1 つの css のみを対象とし、適切に変更する必要があります。

インポートした css にタイトルや ID を付けることができません (動的です)。上記のコードを試してみました。

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

ご覧のとおり、私が持っている唯一の手がかりは URL です。

このCSSをターゲットにするにはどうすればよいですか? 私はjQueryのスキルがほとんどなく、自分のコードで何か間違ったことをしていると確信しています...しかし、それを対象とする適切な方法が見つかりません。

メディアクエリの代わりにこの古いスタイルスイッチャーを使用しているのはなぜですか? IE7 (クライアントの要件 - 土曜日にマンモスを狩っていると確信しています)に必要であり、Plone で奇妙なエラーを引き起こしているため、respond.js と css3-mediaqueries の両方が好きではありません。

4

2 に答える 2

1

最後に、数時間遊んだ後、解決策を見つけました。

$(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」という文字列が他にないため、キーワードを変更しました....

于 2013-06-14T08:15:05.377 に答える
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/

サイズ変更は、フィドルで少し不安定になる場合があります。ページでサイズ変更が複数回発生する場合は、タイムアウトにすることができます。Web上でそれに関する多くのアドバイス。

于 2013-06-12T16:37:03.993 に答える