使用下拉菜单动态更改文本字段中的字体样式和大小 [英] Dynamically change font style and size in text field, using a drop down menu
问题描述
您好，我对网络应用程序还比较陌生.并做一些练习.
这是我要学习的方法:
我有一个带有三个下拉菜单的文本字段，其中包含用于更改字体样式，字体类型和字体大小的选项.
因此，当应用程序运行时，用户会在文本框中输入内容，并可以按照自己希望的方式对其进行样式设置.单击按钮即可使更改生效.
我有从W3Shools修改过的这段代码，但是我一无所获.我缩短了代码，只包含了一种更改字体的字体标准.
我需要方向.我对需要使用的工具有所了解，但不知道如何实际实现它们.谢谢
Hi there I''m relatively new to web apps. and just doing some practice.
Here is what I what to learn how to do:
I have a text-field with three drop-down menus,with options to change the font style, font type, and font size.
So when the app runs, the user enters something in the text box and can style it which ever way they desire. the changes take effect with a click of a button.
I have this code that I modified from W3Shools, but I''m getting nowhere.I shorten the code and only included one font criteria to change the text.
I need direction. I have an idea of the tools i need to use, but don''t know how to actually implement them. Thanks
<br />
<pre lang="xml"><html><br />
<head><br />
<script type="text/javascript"><br />
function setFont()<br />
{<br />
if (document.getElementById("font")== Bold italic){<br />
document.getElementById("Text10").style.font="italic bold 12px arial,serif";}<br />
else if(Text10==Plain){<br />
document.getElementById(Text10").style.font="plain 12px arial,serif";}<br />
else if(Text10.innerHTML==Bold){<br />
document.getElementById("Text10").style.font="bold 12px arial,serif";}<br />
else{<br />
document. getElementById("Text10").style.font="italic 12px arial,serif";}<br />
}<br />
</script><br />
</head><br />
<body><br />
<input id="Text10" type="text"/><br />
<select id ="font" onchange="setFont()"><br />
<option value="Plain">Plain</option><br />
<option value="Bold">Bold</option><br />
<option value="Italic">Italic</option><br />
<option value="Bold Italic">Bold Italic</option><br />
</select><br />
<input type="button" onclick="setFont()" value="Change font" /><br />
</body><br />
</html></pre><br />
>是否有必要使用单独的< div>
>>Is it necessary to use separate <div> for each element?
推荐答案
如果内容页面中有JavaScript，则使用该示例
Hi if you have the javascript at the content page then use like this example
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" language="javascript">
function setFont() {
alert("Hello");
document.getElementById("<%=TextBox1.ClientID %>").style.font = "italic bold 22px arial,serif";
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" value="Test" runat="server" onclick ="setFont();" />
</asp:Content>
如果您是从母版页的开头部分使用它的，请在此处参考我的答案..
多个文本框的JavaScript验证 [ClientID 属性.如果脚本位于如上所示的页面内容中，则可以传递给后面的代码中的javascript或直接在内联代码中使用它.
if you are using it from the head section in the master page then refer my answer here..
Javascript Validation of Multiple Textboxes[^]
The point is document.getElementById("Text10") won''t work because when loading the page it is not the ID of that element. So you have to use the ClientID property of that element class. That you can pass to the javascript in code behind or use it directly in the inline coding if the script is at the page content as shown above.
您好，
我已经修改了您的代码以帮助实现您的目标.这里有几件事要牢记.
-JavaScript区分大小写.
-如果您是JavaScript的新手，请通过网络(使用Google)详细了解它.
hello,
I have modified your code to help achieve your objective. Here are few thing to keep in mind.
- JavaScript is case sensitive.
- If you new to JavaScript, read more about it from the web (use Google)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function setFont()
{
var selectFont = document.getElementById("font");
if (selectFont) {
var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
if (selectFontValue == "Bold Italic") {
document.getElementById("Text10").style.font = "italic bold 12px arial,serif";
}
else if (selectFontValue == "Plain") {
document.getElementById("Text10").style.font = "12px arial,serif";
}
else if (selectFontValue == "Bold") {
document.getElementById("Text10").style.font = "bold 12px arial,serif";
}
else {
document.getElementById("Text10").style.font = "italic 12px arial,serif";
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text10" type="text"/>
<select id ="font">
<option value="Plain">Plain</option>
<option value="Bold">Bold</option>
<option value="Italic">Italic</option>
<option value="Bold Italic">Bold Italic</option>
</select>
<input type="button" onclick="setFont()" value="Change font" />
</div>
</form>
</body>
</html>
这篇关于使用下拉菜单动态更改文本字段中的字体样式和大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
