嗨，我一直在摆弄这个简单的脚本动态显示文本，因为它键入，然后通过一个下拉列表改变该文本的字体，但我不能得到字体改变工作，任何帮助，为什么会是伟大的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font test</title>
<style>
#output{
padding: 10px;
width: 150px;
text-align: center;
font-weight: bold;
font-size: 24px;
left: 150px;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#UpdateText").keyup(function(){
// Getting the current value of textarea
var currentText = $(this).val();
// Setting the Div content
$("#output").text(currentText);
});
});
</script>
</head>
<body>
<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
<select id="input-font" onchange="myFont()">
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
<div id="output"></div>
<script>
function myFont() {
document.getElementById("#output").style.fontFamily = font.value;
}
</script>
</body>
</html>
两个问题:
>
在id属性之前将#前缀为getElementById()，将传递的字符串视为id，这是一个错误。
document.getElementById（“output”）。style.fontFamily=font.value；
请注意:由于您正在使用jQuery，如果可能的话，我建议您使用jQuery
$("#output").css('font-family', font.value);
代码示例:
null
<style>
#output{
padding: 10px;
width: 150px;
text-align: center;
font-weight: bold;
font-size: 24px;
left: 150px;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#UpdateText").keyup(function(){
// Getting the current value of textarea
var currentText = $(this).val();
// Setting the Div content
$("#output").text(currentText);
});
});
</script>
<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
<select id="input-font" onchange="myFont(this)">
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
<div id="output"></div>
<script>
function myFont(font) {
$("#output").css('font-family', font.value);
}
</script>
您可以使用jquery获取当前字体选择框值。
请参考下面的JSFiddle。
null
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font test</title>
<style>
#output{
padding: 10px;
width: 150px;
text-align: center;
font-weight: bold;
font-size: 24px;
left: 150px;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#UpdateText").keyup(function(){
// Getting the current value of textarea
var currentText = $(this).val();
// Setting the Div content
$("#output").text(currentText);
});
});
</script>
</head>
<body>
<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
<select id="input-font" onchange="myFont()">
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
<div id="output"></div>
<script>
function myFont() {
$('#output').css('font-family',$('#input-font').val());
}
</script>
</body>
</html>