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 来调出它们。

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

引用:

• 样式属性:https://developer.mozilla.org/en-US/docs/DOM/element.style
• classList 属性:https://developer.mozilla.org/en-US/docs/DOM/element.classList