更改字體取決於選擇選項標記

我有很多意志力但很難實現它們。這是其中之一。我輸入的形式稱爲caption：更改字體取決於選擇選項標記

<input id="caption" type="text" name="caption" placeholder="Caption" maxlength="30"/>

而且我使用.onkeyup從caption輸入顯示值：

<!-- This code showing "caption" value --> 
<span id="print" class="date-container"></span>

現在，我想用select option標籤來改變caption的字體：

<select id="font" name="font"> 
    <option value="kalam" selected="selected">Kalam</option> 
    <option value="handlee">Handlee</option> 
    <option value="pacifico">Pacifico</option> 
</select>

我的問題是，我如何更改字體家族取決於選擇的選項值？

示例：我上input caption field輸入查詢值，並將其自動示出在向上date-container然後我想改變默認字體到另一個select option。但保持caption顯示，所以它只是改變字體家族。謝謝！

來源

2017-02-26 Gilang Rizkie

你到目前爲止嘗試過什麼？你試圖改變字體的地方在哪裏？ – NewToJS

@NewToJS我不知道該怎麼做，所以我問了它.. –

好吧，也許這樣的事情會有幫助，如果你想要一個純粹的JavaScript解決方案。 https://jsfiddle.net/xauu3agn/如果你已經有jQuery，那麼Farzin Kanzi的答案將會更短/更清晰，但我建議你做一些研究並嘗試一些你自己的方法，然後用你的源代碼提交一個問題'有問題。 – NewToJS

它需要的js或jquery的：

<script> 
    $('#font').change(function(){ 
    $('#caption').css('font-family', $('#font').val()); 
    }); 
</script>

添加您的頁面的jQuery的文件後，在<head>標籤補充一點：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

和在選擇和文本框之後應付我的代碼。

來源

2017-02-26 15:58:57

謝謝！它很容易爲你..難以爲我實現這個問題:( –

你歡迎。但是我的英語不好，我不明白它的工作？:) –

是的，這個代碼工作完美，因爲我想;） –

-1

有一個checked CSS僞選擇器。

option:checked { 
 
    font-family: fantasy; 
 
} 
 

 
option { 
 
    font-family: sans-serif; 
 
}

<select> 
 
    <option>Cat</option> 
 
    <option>Dog</option> 
 
</select>

來源

2017-02-26 15:57:26

這是如何改變字體或以任何方式回答問題？ – jao

看起來不像樣 –

@jao此代碼根據所選問題更改基於所選選項標籤的font-family css屬性。 '我的問題是，我如何根據選擇的值選擇更改字體系列？' –

更改字體取決於選擇選項標記

回答

相關問題