我已经使用 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将是我的最后选择。
请帮助我。
谢谢, 奇兰萨卡