如何使用javascript更改段落的字體大小

Question

您好，我正在學習javaScript，並嘗試在站點中使用3個按鈕來更改段落的字體大小，而我在編寫代碼時，控制台卻提出了這種錯誤，我無法弄清它是什么。 我也想知道是否即時編碼的方式非常正確，謝謝。

html代碼：

<!DOCTYPE html>
<html leng="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi ejercicio DHTML</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script type="text/javascript" src="js/codigo.js"></script>
    </head>
    <body>
        <p id="parrafo">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
        </p>
        <span class="boton" id="boton1">Fuente pequeña</span>
        <span class="boton" id="boton2">Fuente mediana</span>
        <span class="boton" id="boton3">Fuente grande</span>
    </body>
</html>

CSS：

p {
    font-size: 13px;
    margin-bottom: 2em;
}
.boton {
    background: red;
    padding: .5em 1em;
}

javascript：

window.addEventListener('load', inicio, false);

function inicio() {
    var indice = [1, 2, 3];
    for (var i = 0; i < indice.length; i++) {
        var boton = document.getElementById('boton' + indice[i]);
        boton.addEventListener('click', cambiarFuente, false);
    };
}

function cambiarFuente() {
    console.log('hola');
}

最后是錯誤：

Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6

謝謝你們的關注:)

好吧，我之前放置了標簽，現在至少可以正常工作，這就是我的看法。...出現了另一個問題，該段未更改其字體大小，但我仍然收到控制台日志消息，就好像它在工作：/

window.addEventListener('load', inicio, false);

function inicio(){
var indice =[1,2,3];
for (var i = 0; i < indice.length; i++) {
    var boton = document.getElementById('boton' + indice[i]);
    boton.addEventListener('click', cambiarFuente, false);
};

function cambiarFuente(){
    var parrafo = document.getElementById('parrafo');
    parrafo.style.fontSize=20;
    console.log('hola');
}
}

我也不知道如何為每個按鈕xD分配不同的字體大小，有人可以建議我嗎？

Answer 1

當document.getElementById返回null時，表示找不到包含提供的ID的元素。 在這種情況下，這是因為腳本在頁面加載之前正在運行。

在load事件之后調用該函數：

window.onload = function() {
   // stuff to run onload
};

額外的預防措施是在嘗試調用方法之前，檢查getElementById是否返回元素（或至少返回null以外的其他值）。

編輯

此外，正如Mahesh Sapkal所指出的那樣，小於8（可能為9？）的IE不支持addEventListener ，您必須使用attachEvent 。 有許多基於特征檢測使用一個或多個的“ addEvent”函數，這是一個簡單的函數：

  function addListener(element, event, fn) {

    // Use addEventListener if available
    if (element.addEventListener) {
      element.addEventListener(event, fn, false);

    // Otherwise use attachEvent, set this and event
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, (function (el) {
        return function() {
          fn.call(el, window.event);
        };
      }(element)));

      // Break closure and primary circular reference to element
      element = null;
    }
  }

循環變成：

var boton;

for (var i = 0; i < indice.length; i++) {
    boton = document.getElementById('boton' + indice[i]);

    if (boton) {
          addListener(boton, 'click', cambiarFuente);
    }
}

請注意，if塊后沒有分號，它不是語句（盡管通常包含語句）。

Answer 2

您可以使用這種方式代替：

window.addEventListener('load', inicio, false);

用這個：

$(document).ready(function(){
    inicio();
});

並在函數中：

function inicio(){
    var indice =[1,2,3];
    for (var i = 0; i < indice.length; i++) {
        var boton = $('#boton' + indice[i]);
        boton.click(function(){
            cambiarFuente();
        });
    }
}

您的腳本不起作用的原因是，您甚至在文檔加載之前就在執行腳本。 一個簡單的解決方法是將您的<script></script>放在</body>之前，並且可以正常工作。 看看這個。

如何使用javascript更改段落的字體大小

問題描述

2 個解決方案

解決方案1
2 2013-03-26 03:42:21

編輯

解決方案2
1 已采納 2013-03-26 03:45:14

如何使用javascript更改段落的字體大小

問題描述

2 個解決方案

解決方案1 2 2013-03-26 03:42:21

編輯

解決方案2 1 已采納 2013-03-26 03:45:14

解決方案1
2 2013-03-26 03:42:21

解決方案2
1 已采納 2013-03-26 03:45:14