2009年7月12日日曜日

Dojo ComboBoxのstyleを動的に変更

Dojo ComboBoxのスタイルを動的に変更する方法として、
入力フィールドのスタイルシートを変更するのでは動作しない。
例として、親要素のスタイルシートを変更することで対応可能だ。

JavaScriptコード
function styleChange() {
  var comboBox= document.getElementById("comboBox1");

  // これは駄目
  comboBox.style.borderColor = "red";
  comboBox.style.borderStyle = "double";

  // これで可能
  comboBox.parentNode.parentNode.style.borderColor = "red";
  comboBox.parentNode.parentNode.style.borderStyle = "double";
}

HTMLコード
<select id="comboBox1" dojoType="dijit.form.ComboBox"
autocomplete="false" value="California">
<option selected="selected">California</option>
<option>Illinois</option>
<option>New York</option>
</select>