jQuery更改框边框值

时间:2013-10-16 23:37:55

标签: jquery html css

我已经制作了两个select框,用于更改value信息中文档的css。

背景select框仅使用#159159等颜色。

框阴影select框需要其他信息,例如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框与背景value框使用相同的select

但我不知道怎么样?我猜的是......

$("#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());
 }
);

感谢您抽出宝贵时间帮助我:)

0 个答案:

没有答案