サイズ、太さ、フォント色、フォント ファミリーで構成される複数のドロップダウンを作成する方法を教えてください。ユーザーが各ドロップダウンから 1 つを選択すると、送信をクリックし、p または div 要素が変更されますか? 私は1つのコードを持っていますが、複数を変更する方法がわかりませんか? また、クリック時にボタンに変更する必要があり、表示は実際のボタンではなく ap タグに表示されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS Change Class</title>
<style type="text/css" media="screen">
.red { border: 1px solid red; }
.blue { border: 1px solid blue; }
.green { border: 1px solid green; }
</style>
</head>
<body>
<select id="colors">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<input type="button" class="red" value="This is a button" id="button" />
<script type="text/javascript" charset="utf-8">
var colors = document.getElementById('colors');
var button = document.getElementById('button');
addEvent(colors, 'change', function() {
button.className = colors.value;
});
// Based on the lessons from Nettuts
function addEvent(obj, evt, fn) {
evt = evt.replace('on', '');
if( obj.attachEvent )
obj.attachEvent('on' + evt, fn);
else
obj.addEventListener(evt, fn, false);
}
</script>
</body>
</html>
**更新: さらに 3 つのドロップ ダウン、サイズ x3 オプション、フォント ファミリ x3 オプション、およびフォント ウェイト x3 オプションを追加したいと思います。ユーザーはそれぞれから選択し、送信ボタンをクリックすると、ap タグに表示されるはずです。