如何用JavaScript改变一个段落的字体大小

How to change font size of a paragraph with JavaScript

本文关键字：段落 一个 字体 JavaScript 何用 改变      更新时间：2023-09-26

我正在学习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');
}

和最后的错误:

未捕获的TypeError: Cannot call method 'addEventListener' of null codigo.js:6

我把<script>标签放在</body>之前，现在它的工作;至少我是这么想的。另一个问题出现了，它的段落没有改变它的字体大小，但我仍然收到控制台日志消息，如果它的工作:

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

我也不知道如何为每个按钮分配不同的字体大小!谁能给我点建议吗?

当文档。getElementById返回null，这意味着它没有找到具有提供ID的元素。在本例中，这是因为在加载页面之前脚本正在运行。

在加载事件之后调用函数:

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

一个额外的预防措施是在尝试调用方法之前检查getElementById是否返回一个元素(或者至少不是null)。

编辑

此外，正如Mahesh Sapkal指出的那样，IE小于8(也许是9?)不支持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块后面没有分号，它不是一个语句(尽管它通常包含语句)。

你可以用这种方式代替:

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>之前，它可以工作。

相关文章：