0

我制作了两个select框，可以根据信息更改文档的 css value。

背景select框只使用一种颜色，如#159159.

box-shadowselect框需要额外的信息，例如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