在 JavaScript 中需要帮助来增加输出大小

need help in javascript to increase the output size

本文关键字：增加 输出 帮助 JavaScript      更新时间：2023-09-26

我是 JavaScript 的新手。我制作了一个表格，拿了textarea和button，并在div标签中显示了textarea的文本，并采取了 2 个按钮。现在我想在单击第一个按钮时div标签中的输出大小增加，同样，单击第二个按钮时它变得粗体，依此类推......

<html>
<body>
<form name="myform" onsubmit="return fuc1()">
<table>
<tr><td>Description</td><td> <textarea name="message1" id="message" rows="10" cols="30" font-size:"100px";></textarea><br/></td></tr>
<tr><td><button onclick=fincrease() type="button" name="sizeinc" id="sizeinc" >Increase SIZE</button></td>
<td><button type="button" name="sizedec" id="sizedec" >Decrease SIZE</button></td></tr>
<tr><td><button type="button" onclick="fbold()" name="bold" id="bold" >BOLD</button></td>
<td><button type="button" name="italic" id="italic" >ITALIC</button></td>
<td><button type="button" name="underline" id="underline" >UNDERLINE</button></td></tr>
<tr><td><select id="colors" onclick="fcolor()">
 <option  value="Default">(Please select color)</option>
  <option value="pink">PINK</option>
  <option value="yellow">YELLOW</option>
  <option value="green">GREEN</option>
  <option value="orange">ORANGE</option>
</select>
</td>
<td><select id="borders" onclick="fborder()">
 <option  value="Default">(Please select border)</option>
  <option value="dashed">DOTTED</option>
  <option value="thick solid">Thick Solid</option>
  <option value="solid">Solid</option>
</select></td>
</tr>
<tr><td><input type="submit"/></td></tr>
</table>
<div id="div1">OUTPUT</div>
</form>
<script type="text/javascript">
function fuc1()
 {
var tex=document.getElementById("message").value;
var colr=document.getElementById("colors").value;
var bord=document.getElementById("borders").value;
var increase=document.getElementById("sizeinc").value;
var decrease=document.getElementById("sizedec").value;
var italic1=document.getElementById("italic").value;
var bold1=document.getElementById("bold").value;
var under=document.getElementById("underline").value;
 html=tex;
document.getElementById("div1").innerHTML=html;
return false;
}
function fcolor(){
var c=document.getElementById("colors").value;
if(c=="pink")
{
document.getElementById("div1").style.color= c;
}
if(c=="yellow")
{
document.getElementById("div1").style.color= c;
}
if(c=="green")
{
document.getElementById("div1").style.color= c;
}
if(c=="orange")
{
document.getElementById("div1").style.color= c;
}
}
function fborder(){
var b=document.getElementById("borders").value;
if(b=="dashed")
{
document.getElementById("div1").style.border=b;
}
if(b=="thick solid")
{
document.getElementById("div1").style.border=b;
}
if(b=="solid")
{
document.getElementById("div1").style.border=b;
}
}
function fbold()
{
}
</script>

记得将它们添加到按钮的点击事件中

function fbold()
{
    if (document.getElementById("div1").style.fontWeight == "bold")
    {
        document.getElementById("div1").style.fontWeight = "normal"
    }
    else
    {
        document.getElementById("div1").style.fontWeight = "bold";
    }
}
function fItalic() {
    if (document.getElementById("div1").style.fontStyle == "italic") {
        document.getElementById("div1").style.fontStyle = "normal"
    }
    else {
        document.getElementById("div1").style.fontStyle = "italic";
    }
}
function fUnderline()
{
    if (document.getElementById("div1").style.textDecorationUnderline) {
        document.getElementById("div1").style.textDecorationUnderline = false
    }
    else {
        document.getElementById("div1").style.textDecorationUnderline = true;
    }
}
function fincrease()
{
    if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "")
    {
        document.getElementById("div1").style.fontSize = "14px"
    }
    document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) + 1) + "px"
}
function fdecrease() {
    if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "") {
        document.getElementById("div1").style.fontSize = "14px"
    }
    document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) - 1) + "px"
}

一般提示：向函数添加一些console.log("...")消息，并在具有控制台的浏览器中打开页面（例如，在谷歌浏览器中，按 F12）。这将使您能够在测试函数时查看何时调用函数。

更具体的提示：在选择列表中，将onclick替换为onchange。

相关文章：