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