我已经制作了两个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());
}
);
感谢您抽出宝贵时间帮助我:)