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;
}