ドロップダウンリストJavaScriptを使用してテキストボックスのフォントサイズを設定する方法

user3359434

HTMLのコンボボックスとテキストボックスがあり、コンボボックスから任意の数値を選択すると、必要なテキストを入力できます。テキストボックス内のテキストのサイズは、それに応じて変更されます。これを行う方法を教えてください。

前もって感謝します

チャンプ

jQuery使用してコードを単純化できます

ラボデモ

HTMLコード:

<input type="text" value="Sample Text" id="txtBox" name="name">
<br>
<select id="fontSizeDD">
  <option value='12'>12</option>
  <option value='14'>14</option>
  <option value='16'>16</option>
  <option value='18'>18</option>
  <option value='20'>20</option>
  <option value='22'>22</option>
  <option value='24'>24</option>
  <option value='26'>26</option>
</select>

jQueryコード:

$(function(){
  $("#fontSizeDD").change(function(){
$("#txtBox").css("font-size",$(this).val() + "px");
})
});

純粋なJavaScriptソリューション

var fontSizeDD = document.getElementById('fontSizeDD');
fontSizeDD.onchange = function () {
    var txtBox = document.getElementById("txtBox")
    txtBox.style.fontSize = this.value +"px";
};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ドロップダウンリストを使用してテキストボックスに入力する方法

分類Dev

wpfで2つのテキストボックスグリッドのフォントサイズを動的に設定する方法

分類Dev

ダイアログボタンのテキストのフォントサイズを設定する方法

分類Dev

グリッド内のすべてのテキストボックスのフォントサイズを変更する方法、Windowsアプリuwp

分類Dev

javascriptを使用してファイル名をアップロードするようにテキストボックスの値を設定する方法は?

分類Dev

ドロップダウンリストの結果をASP.NETWebフォームのテキストボックスにバインドする

分類Dev

Qtウィジェットアプリケーションでサイズのテキストボックスとボタンを設定します

分類Dev

ドロップダウンリストにテキストボックスの値を追加する方法

分類Dev

jqueryAjaxを使用してテキストボックスのonblurイベントのドロップダウンをバインドする

分類Dev

asp.netのドロップダウンリストの選択に基づいてテキストボックスをバインドする方法は?

分類Dev

グリッドビューテンプレートフィールドの境界フィールドにテキストボックスのフォントサイズを設定するにはどうすればよいですか?

分類Dev

Jquery、ドロップダウンリストからテキストボックスの値でオプションを設定します

分類Dev

ドロップダウンリストを使用して、Javaでオートコンプリートテキストボックスを作成する

分類Dev

選択ドロップダウンでデフォルトのテキストを自動的に設定する

分類Dev

ボタンをクリックすると、JavaScriptを使用してテキストフィールドの値をゼロに設定します

分類Dev

javascriptを使用してドロップダウンリストの値をテキストボックスに渡します

分類Dev

Angularドロップダウンリストの剣道でのフォントサイズの設定

分類Dev

ボタンをクリックして編集テキストにフォーカスをプログラムで設定および削除する方法

分類Dev

Knockout.JSで選択したドロップダウン値に基づいてテキストボックスの可視性を設定する

分類Dev

VBAで作成されたドロップダウンリストのフォントサイズとフォーマットを変更する方法

分類Dev

JAVAを使用してExcelヘッダーテキストのフォント色を設定する方法

分類Dev

anglejs を使用してドロップダウンにデフォルトのアイテムを設定する

分類Dev

mvc のドロップダウン リストを使用してページ サイズを変更する

分類Dev

jqueryを使用してjqueryダイアログボックスがロードされた後にドロップダウンにテキストを設定する方法

分類Dev

ドロップダウンリストに応じてasp設定変数を設定し、ボタンクリックイベントに渡します

分類Dev

コンボボックスを使用してrichTextBoxのフォントサイズを変更する方法

分類Dev

javascriptを使用してテキストボックスに基づいてドロップダウンを表示または非表示にする方法

分類Dev

ブートストラップ3を使用して、MVCフォームの同じ行に検索テキストボックスと2ドロップダウンリストを表示します

分類Dev

ライトスイッチのテキストボックスにフォントを設定する

Related 関連記事

  1. 1

    ドロップダウンリストを使用してテキストボックスに入力する方法

  2. 2

    wpfで2つのテキストボックスグリッドのフォントサイズを動的に設定する方法

  3. 3

    ダイアログボタンのテキストのフォントサイズを設定する方法

  4. 4

    グリッド内のすべてのテキストボックスのフォントサイズを変更する方法、Windowsアプリuwp

  5. 5

    javascriptを使用してファイル名をアップロードするようにテキストボックスの値を設定する方法は?

  6. 6

    ドロップダウンリストの結果をASP.NETWebフォームのテキストボックスにバインドする

  7. 7

    Qtウィジェットアプリケーションでサイズのテキストボックスとボタンを設定します

  8. 8

    ドロップダウンリストにテキストボックスの値を追加する方法

  9. 9

    jqueryAjaxを使用してテキストボックスのonblurイベントのドロップダウンをバインドする

  10. 10

    asp.netのドロップダウンリストの選択に基づいてテキストボックスをバインドする方法は?

  11. 11

    グリッドビューテンプレートフィールドの境界フィールドにテキストボックスのフォントサイズを設定するにはどうすればよいですか?

  12. 12

    Jquery、ドロップダウンリストからテキストボックスの値でオプションを設定します

  13. 13

    ドロップダウンリストを使用して、Javaでオートコンプリートテキストボックスを作成する

  14. 14

    選択ドロップダウンでデフォルトのテキストを自動的に設定する

  15. 15

    ボタンをクリックすると、JavaScriptを使用してテキストフィールドの値をゼロに設定します

  16. 16

    javascriptを使用してドロップダウンリストの値をテキストボックスに渡します

  17. 17

    Angularドロップダウンリストの剣道でのフォントサイズの設定

  18. 18

    ボタンをクリックして編集テキストにフォーカスをプログラムで設定および削除する方法

  19. 19

    Knockout.JSで選択したドロップダウン値に基づいてテキストボックスの可視性を設定する

  20. 20

    VBAで作成されたドロップダウンリストのフォントサイズとフォーマットを変更する方法

  21. 21

    JAVAを使用してExcelヘッダーテキストのフォント色を設定する方法

  22. 22

    anglejs を使用してドロップダウンにデフォルトのアイテムを設定する

  23. 23

    mvc のドロップダウン リストを使用してページ サイズを変更する

  24. 24

    jqueryを使用してjqueryダイアログボックスがロードされた後にドロップダウンにテキストを設定する方法

  25. 25

    ドロップダウンリストに応じてasp設定変数を設定し、ボタンクリックイベントに渡します

  26. 26

    コンボボックスを使用してrichTextBoxのフォントサイズを変更する方法

  27. 27

    javascriptを使用してテキストボックスに基づいてドロップダウンを表示または非表示にする方法

  28. 28

    ブートストラップ3を使用して、MVCフォームの同じ行に検索テキストボックスと2ドロップダウンリストを表示します

  29. 29

    ライトスイッチのテキストボックスにフォントを設定する

ホットタグ

アーカイブ