1

私は JQueryMobile ページに取り組んでいます。このページには、カスタム メニューを含む選択要素 (ドロップダウン) が含まれます。メニューを選択ボタンのすぐ下に配置し、その幅を選択ボタンの幅に変更しようとしています。さらにスタイリングも続きます。

Firebug では、JQM が選択メニューの CSS クラス (ここでは select-choice-1-listbox-popup) とその位置属性を変更することがわかりました。この要素を取得して単純に top 属性を変更するのが適切なアプローチかもしれないと思いました。しかし、これはうまくいきません。最初のアラートで "top" 属性の値が表示されないため、コードの実行が早すぎると思います。

<script type="text/javascript">
    function positionMenu() {
        alert(document.getElementById('select-choice-1-listbox-popup').style.top); // prints ""
        document.getElementById('select-choice-1-listbox-popup').style.top="300px";
        alert(document.getElementById('select-choice-1-listbox-popup').style.top); // prints "300px"
    }
</script>

[...]

<div onClick="positionMenu();"  data-role="fieldcontain" style="width:300px;">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select data-native-menu=false name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

私の質問は次のとおりです。選択メニューの属性を変更するにはどうすればよいですか?

4

0 に答える 0