如何使用下拉列表javascript在文本框中设置字体大小

时间:2014-02-27 08:01:04

标签: javascript html

我在html和文本框中有一个组合框,当我从组合框中选择任何数字时我输入了一些文本然后在文本框中的文本大小根据如何改变请帮助我

提前致谢

3 个答案:

答案 0 :(得分:3)

您可以使用jQuery简化代码

<强> LAB DEMO

HTML CODE:

<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 CODE:

$(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";
};

答案 1 :(得分:1)

如果您使用jQuery,您可以为组合框编写一个on change处理程序并使用

$("#textBox").css("font-size",$(this).val() + "px");

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

答案 2 :(得分:-1)

这是一个完全有效的例子:(可在jsbin link上找到)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>Text Area Size</title>
</head>
<body>
<select onchange="$('#txt').css('font-size', event.target.value + 'px')">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
  <textarea id="txt">Test Test</textarea>
</body>
</html>
相关问题