javascript onclick函数以放大文本

Question

我不确定为什么，但似乎无法使它正常工作。

这是我放大字体的功能。

<script type="text/javascript">
    function growText() {
        var text = document.getElementById("t_left_text");
        text.font-size=22px;        
</script>

这就是我所说的

<div id="t_left" onclick="growText()">
    <br />
    <p id="t_left_text">Mountains are beautiful land structures <br /> that are a result of plate tectonics.</p>
    <br />
</div>

Answer 1

尝试：

text.style.fontSize = "22px";

演示： http : //jsfiddle.net/C2MWN/

当您想更改元素的CSS时，需要使用style属性。 为了确定特定样式属性的名称，将CSS名称转换为驼峰大小写-“ font-size”变为“ fontSize”，以便标识符在JavaScript中有效。

虽然设置style属性绝对可以，并且尽管这是一个非常简单的示例，但添加和删除class可能更容易。 在设置多个CSS属性时，这尤其有用。 该类可以定义为：

.enlarged-font {
    font-size: 22px;
}

然后您将操纵text.className属性（和/或classList属性）。

通过使用浏览器中的JavaScript控制台，可以轻松地对问题进行更好的描述（对我们中某些人来说是显而易见的），具体取决于所使用的浏览器。 在Firefox中，您可以使用Firebug。 在Internet Explorer和Chrome中，您可以使用开发人员工具。 如果已安装/启用，则通常可以通过按键盘上的F12来调出它们。

另外，不要忘记使用}关闭函数。

参考：

• style属性： https : //developer.mozilla.org/en-US/docs/DOM/element.style
• classList属性： https : //developer.mozilla.org/zh-CN/docs/DOM/element.classList

Answer 2

使用以下代码

function growText() {
            var text = document.getElementById("t_left_text");
            text.style.fontSize ="22px";
}

工作示例http://jsfiddle.net/D2anZ/

Answer 3

这是使用CSS完成您想要的版本。 这样，如果您想同时对不同的文本集执行此操作，并且想要更改该字体大小，则只需要在一个位置进行更改。 （或者，如果您还想添加其他CSS属性（颜色等），

小提琴

的JavaScript

function growText() {
    var text = document.getElementById("t_left_text");
    text.className = 'large-font';
}

的CSS

.large-font {
    font-size: 22px;
}