javascript - 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>

score 8 · Accepted Answer

尝试：

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/en-US/docs/DOM/element.classList

score 1 · Accepted Answer

使用下面的代码

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

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

score 0 · Accepted Answer

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

小提琴

JavaScript

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

CSS

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

javascript - javascript onclick 函数放大文本

3 回答 3

Related

Reference