Question

我最近开始做网络编程。我有一个使用javascript的任务。

我想要做的是我在纹理中输入一些文字，如果按下按钮，它会改变文字大小所以

1）在textarea中输入文字

2）按一下按钮

3）一个按钮从javascript文件调用javascript函数

4）函数更改文本大小并将其返回到某处（？）

5）尺寸改变的文字显示在纹理

中

我想我做了1~3但不是100％肯定

这是我的代码：

function doFunction() {
     var txt = document.getElementById("txt").value;
     var result = txt.fontsize(24); 
    }

<h1>Pimp My Text</h1>
        <div>
            <img  src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" />
        </div>
        <fieldset>
            <legend>Text</legend>
            <textarea rows ="3" cols= "30" id="txt">
            </textarea>
            
        </fieldset>
        <fieldset>
            <legend>Pimpification</legend>
            <input type="button" value="Bigger pimpin!"  onclick="doFunction();"/
    </br>
            <input type="checkbox" name="Bling" />Bling
        </fieldset>

Answer 1

首先给你的文字是CSS的默认字体大小：

#txt {
    font-size: 10px;
}

每次单击按钮时调用此函数。

Javascript 没有 JQuery：

function increaseTextSize() {
    document.getElementById("#txt").style.fontSize = "30px";
}

使用JQuery的Javascript：

function increaseTextSize() {
    $("#txt").css("font-size", "30px");
}

需要更改HTML

更改

onclick="doFunction();"

到

onclick="increaseTextSize();"

代码段 -

function increaseTextSize() {
        document.getElementById("txt").style.fontSize = "30px";
}

<body>
    <h1>Pimp My Text</h1>
    <div>
        <img  src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" />
    </div>
    <fieldset>
        <legend>Text</legend>
        <textarea rows ="3" cols= "30" id="txt">
        </textarea>

    </fieldset>
    <fieldset>
        <legend>Pimpification</legend>
        <input type="button" value="Bigger pimpin!"  onclick="increaseTextSize();"/
</br>
        <input type="checkbox" name="Bling" />Bling
    </fieldset>

    </body>

Answer 2

如果要从数字输入更新TextArea文本大小，可以将JS函数更新为：

function doFunction() {
    var txt = document.getElementById("txt").value;
    document.getElementById("txt").style.fontSize = txt.trim() + "px";
}

Answer 3

您可以使用javascript来增加字体大小。您可以将字体大小值更改为首选值。

＆＃13;

<body>
    <h1>Pimp My Text</h1>
    <div>
        <img  src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" />
    </div>
    <fieldset>
        <legend>Text</legend>
        <textarea rows ="3" cols= "30" id="txt">
        </textarea>

    </fieldset>
    <fieldset>
        <legend>Pimpification</legend>
        <input type="button" value="Bigger pimpin!"  onclick="doFunction();"/>
        <br/>
        <input type="checkbox" name="Bling" />Bling
    </fieldset>
    
    <script>
      function doFunction() {
      document.getElementById("txt").style.fontSize = "30px";
      }
    </script>
    
</body>

＆＃13;

Answer 4

2D缩放转换使您可以调整元素的大小。执行2D缩放转换。

以下CSS规则使用class scale1缩放<div>元素。所有尺寸的元素都要大30％：

div.scale1 {transform：scale（1.3）; }

然后使用JavaScript添加类属性＆＃39; scale1＆＃39;到元素

elementName.classList.add（＆＃34;量程1＆＃34）;

如何将html按钮连接到javascript函数？

4 个答案: