1

jQuery/jQueryMobile を使用すると、次のようなリンクがあります。

<a href="index.html" id="HomeLink" data-role="button" data-mini="true" data-icon="home" data-iconpos="top" >Home</a>

さまざまな画面サイズをテストしようとしていますが、画面の幅が 300px 未満の場合は、次のように変更したいと考えています。

data-iconpos="top"

に

data-iconpos="notext"

そのため、アイコンのみを取得します。私はJavaScriptでそれをやろうとしました：

var hl = document.querySelector('#HomeLink');
if ($(window).width() < 300) {
    hl.setAttribute("data-iconpos", "notext");
} else {
    hl.setAttribute("data-iconpos", "top");
}

しかし、それはうまくいきません。

質問: 代わりに CSS で行うことはできますか?

そうでない場合: JavaScript でどのように行うことができますか?

4

4 に答える 4

1

私の知る限り、CSS でデータ属性を実際に設定することはできませんが、すでに jQuery を使用しているので、ぜひ試してみてください。

$('#HomeLink').data('iconpos', ($(window).width() < 300 ? 'notext' : 'top') );

それをドキュメントの準備ができている状態でラップすることを忘れないでください!

于 2013-01-28T10:10:16.397 に答える
0

別のアプローチを使用することをお勧めします。

ここdata-iconpos="top"は私には少し場違いに見えます。スタイルを HTML にインライン化しようとしているように感じます (おそらく私は間違っています)。

メディアクエリを試してみませんか?

@media screen and (max-width: 300px) {
    #HomeLink {
        /* styling for HomeLink when screen width is less than 300px */
    }
}

これは CSS のみのソリューションです。ページが読み込まれた後にユーザーが画面のサイズを変更することを決定した場合に機能します。この jsfiddleの「結果」フレームのサイズを変更してみて、リンクの色が変わることに注意してください。

推奨読書:

メディア クエリに関するドキュメントは次のとおりです: http://www.w3.org/TR/css3-mediaqueries/

警告: ええと、IE が 9 未満、ええと...

于 2013-01-28T10:36:03.907 に答える
0

この方法でコードを変更できます。

    var hl = $('#HomeLink');
    if ($(window).width() < 300) {
        hl.data("iconpos", "notext");
    } else {
        hl.data("iconpos", "top");
    }

と.attr():

    var hl = $('#HomeLink');
    if ($(window).width() < 300) {
        hl.attr("data-iconpos", "notext");
    } else {
        hl.data("data-iconpos", "top");
    }
于 2013-01-28T10:15:41.470 に答える
0

ウィンドウのサイズ変更イベントでコードをラップしてみてください。

$(window).resize(function () {
check();
})
$(function () {
check();
})

function check() {
if ($(window).width() < 300) {
    $('#HomeLink').attr('data-iconpos', 'notext');
} else {
    $('#HomeLink').attr('data-iconpos', 'top');
}
}
于 2013-01-28T10:18:21.880 に答える