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

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

javascript html

如何使用下拉列表javascript设置文本框中的字体大小,javascript,html,Javascript,Html,我在html和文本框中有一个组合框，当我从组合框中选择任何数字时，我会在其中输入一些我想要的文本，然后文本框中文本的大小会随之改变，如何做到这一点请帮助我提前感谢如果您使用jQuery，您可以为组合框编写一个on-change处理程序并使用 $("#textBox").css("font-size",$(this).val() + "px"); 像您可以使用来简化代码 HTML代码： <input type="text" value="Sample Text" id="txtBox

我在html和文本框中有一个组合框，当我从组合框中选择任何数字时，我会在其中输入一些我想要的文本，然后文本框中文本的大小会随之改变，如何做到这一点请帮助我

提前感谢

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

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

像

您可以使用来简化代码

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>

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

这是一个完全有效的示例：（可在上获得）


文本区域大小
10
20
30
测试

代码在哪里？我不喜欢内联JS代码的可能副本不要使用内联JavaScript，因为它打破了标记、表示和行为之间应该存在的清晰分离。此外，如果您的脚本在页面底部加载，则用户可能会与您的页面交互，从而触发试图调用尚未加载的代码的事件。此外，尽管jQuery是一个不错的选择，甚至可能是OP正在使用的东西，这个问题需要一个JavaScript解决方案，并且没有用jQuery标记。答案至少应该包括一个JavaScript解决方案。。。OP确实选择了jQueryanswer@Ben：并且acceped答案还包含一个JavaScript解决方案，因为OP在原始帖子中没有指定需要jQuery。一般来说，只提供语言或库中的解决方案而不是问题中要求的解决方案是非常糟糕的做法。尽管在使用所需技术的解决方案之上添加它们并没有什么错。虽然jQuery是一个很好的替代方案，甚至可能是OP正在使用的东西，但问题是需要一个JavaScript解决方案，而且也没有用jQuery标记。答案至少应该包括一个JavaScript解决方案。虽然jQuery是一个很好的替代方案，甚至可能是OP正在使用的东西，但问题是需要一个JavaScript解决方案，并且没有用jQuery标记。答案至少应该包括一个JavaScript解决方案。我还将添加纯JavaScript解决方案Thanks@FrançoisWahl：我还添加了纯JS解决方案；）

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

<!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>