使用带有HTML类的CSS和JavaScript更改多个段落的字体大小。

时间:2018-06-30 11:07:40

标签: javascript html css

我已经使用 HTML,CSS JavaScript 开发了一个脚本,用于更改多个段落的默认字体大小。这些段落具有共同的类别,即 size-change-01

完整源代码如下。

 function resizeTextnew(multiplier) {
            if (document.getElementsByClassName("size-change-01").style.fontSize == "") {
                document.getElementByClassName("size-change-01").style.fontSize = "1.0em";
            }
            document.getElementByClassName("size-change-01").style.fontSize = parseFloat(document.getElementByClassName("size-change-01").style.fontSize) + (multiplier * 0.2) + "em";
        }
* {
            font-family: calibri;
        }
        
        img {
            height: 100px;
            width: 100px;
        }
        
        .size-change-01
        {
            font-size: 18px;
        }
        
        .myPara {
            text-align: center;
            border: 2px solid #C70039;
            margin: 0 0 20px 0;
        }
        
        .myButtons {
            border: 2px solid #FF5733;
            display: table;
            margin: 0 auto;
            padding: 20px 50px 50px 50px;
        }
        
        .increase{margin: 0 5px 0 0;}
        .decrease{margin: 0 0 0 5px;}
 <div class="myPara">
        <p class="size-change-01">The Quick Brown Fox Jumps Over The Lazy Dog! </p>
    </div>

    <div class="myButtons">
        <h4>Change Font Size</h4>
        <button class="increase" onclick="resizeTextnew(1)" />Increase Size</button>
        <button class="decrease " onclick="resizeTextnew(-1)" />Decrease Size</button>
    </div>

此代码无法正常工作。当我使用控制台视图进行检查时,以下JavaScript函数中的 fontSize 属性存在错误:

 function resizeTextnew(multiplier) {
        if (document.getElementsByClassName("size-change-01").style.fontSize == "") {
            document.getElementByClassName("size-change-01").style.fontSize = "1.0em";
        }
        document.getElementByClassName("size-change-01").style.fontSize = parseFloat(document.getElementByClassName("size-change-01").style.fontSize) + (multiplier * 0.2) + "em";
    }

JavaScript和CSS的fontSize是否有限制?如果可以,我们该怎么做才能解决问题?

我只喜欢使用JavaScript。 jQuery将是我的最后选择。

请帮助我。

谢谢, 奇兰萨卡

0 个答案:

没有答案