重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

HTMLでstyleを指定するフォームの作り方

解決済

  • 質問者：優里さん
  • 質問日時：
  • 回答数：2件

このコードで、<!-- 入力結果を出力 -->のところの style="font-size: 35px;"の35のところもフォームで入力して指定できるようにしたいです。どうしたらそうできるか、教えていただきたいです。よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力文字表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
</style>
</head>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
<input type="text" name="content">
<input type="submit" value="表示">
</form>
<!-- 入力結果を出力 -->
<p id="output" style="font-size: 35px;"></p>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
// 入力内容を出力
document.getElementById('output').textContent = `${inputForm}`;
}
</script>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

参考程度に

No.2ベストアンサー

  • 回答者： gura_
  • 回答日時：

優里さん


　･････style="font-size: 35px;"の35のところもフォームで入力して指定･･･････

参考例。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力文字表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
</style>
</head>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
入力文字: <input type="text" name="content"><br>
文字サイズ: <input type="text" name="fontsz" size="3" value="35">
<input type="submit" value="表示">
</form>
<!-- 入力結果を出力 -->
<p id="output" style="font-size: 35px;"></p>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
// 入力内容を出力
document.getElementById('output').textContent = `${inputForm}`;
}
</script>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
解決しました。

通報する
お礼日時：2023/12/23 16:13

No.1

  • 回答者： kikyuuu
  • 回答日時：

document.getElementById('output').style.fontSize = '35px';



35pxの部分を入力した値にすると書き換わるかなと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとう

通報する
お礼日時：2023/12/23 16:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報