Question

我有3个文本输入框，我想让用户更改字体，但我不知道如何做到这一点。

这是我预览框的代码：

<script type="text/javascript">
$(function()
{
    $(".line1").keyup(function()
    {
    var word=$(this).val();
    $(".line_preview1").html(word);
    return false;
    });
    $(".line2").keyup(function()
    {
    var word=$(this).val();
    $(".line_preview2").html(word);
    return false;
    });
    $(".line3").keyup(function()
    {
    var word=$(this).val();
    $(".line_preview3").html(word);
    return false;
    });
});
</script>


<span class="line_preview1"></span>
<span class="line_preview2"></span>
<span class="line_preview3"></span>
<input type="text" name="line1" class="line1" />
<input type="text" name="line2" class="line2" />
<input type="text" name="line3" class="line3" />

如果我可以为每一行选择很棒的字体

编辑上下文

我想拥有;

<select name=font>
<option>Arial</option>
<option>Verdana</option>
<option>Times New Fubar</option>
</select>

当选择新选项时，它将更新特定预览元素的css

Answer 1

您可以使用.css()

更改CSS属性

$("a#change_font").click(function(){
  $("div#fontchange").css('font-family', 'Courier, mono');
});

<a href="#" id="change_font">Change it!</a>
<div id="fontchange">Hello World!</div>

这里有一篇文章描述了如何将它与选择值一起使用：Getting Select List Values。

使用选择框用jquery更改字体

1 个答案: