0

select情報からドキュメントの css を変更する2 つのボックスを作成しましたvalue

背景selectボックスは のような色のみを使用します#159159

box-shadow selectbox には、 のような追加情報が必要5px 5px 5px 5px #159159です。

ここに例があります: JSFiddle

HTML

  <select id="background" size="6">
   <option value="" selected="selected">background</option>
   <option value="#ff66ff" class="bcff66ff">#ff66ff</option>
   <option value="#66ff66" class="bc66ff66">#66ff66</option>
   <option value="#159159" class="bc159159">#159159</option>
   <option value="#ffffff" class="bcffffff">#ffffff</option>
   <option value="#000000" class="bc000000">#000000</option>
  </select>
  <br /><br /><br />
  <select id="box-border" size="6">
   <option value="" selected="selected">box-border</option>
   <option value="5px 5px 5px 5px #ff66ff" class="bcff66ff">#ff66ff</option>
   <option value="5px 5px 5px 5px #66ff66" class="bc66ff66">#66ff66</option>
   <option value="5px 5px 5px 5px #159159" class="bc159159">#159159</option>
   <option value="5px 5px 5px 5px #ffffff" class="bcffffff">#ffffff</option>
   <option value="5px 5px 5px 5px #000000" class="bc000000">#000000</option>
  </select>

jQuery

$("#background").change(
 function()
 {$('body').css("background-color", $(this).val());}
);
$("#box-border").change(
 function()
 {$('select').css("box-shadow", $(this).val());
  $('select').css("-moz-box-shadow", $(this).val());
  $('select').css("-webkit-box-shadow", $(this).val());
 }
);

jQueryで追加コードを追加することで、ボックスボーダーボックスを背景ボックスselectと同じように使用できると思います。valueselect

しかし、私は方法を知りませんか?私は次のようなことを推測しています...

$("#box-border").change(
 function()
 {$('select').css("box-shadow", "5px 5px 5px 5px" + $(this).val());
  $('select').css("-moz-box-shadow", "5px 5px 5px 5px" + $(this).val());
  $('select').css("-webkit-box-shadow", "5px 5px 5px 5px" + $(this).val());
 }
);

私を助けてくれてありがとう:)

4

0 に答える 0